Asp.net+Vue2構(gòu)建簡(jiǎn)單記賬WebApp之一（設(shè)計(jì)）
Asp.net+Vue2構(gòu)建簡(jiǎn)單記賬WebApp之二（使用ABP迅速搭建.Net后臺(tái)）
Asp.net+Vue2構(gòu)建簡(jiǎn)單記賬WebApp之三（使用Vue-cli構(gòu)建vue.js應(yīng)用）
Asp.net+Vue2構(gòu)建簡(jiǎn)單記賬WebApp之四（vue.js構(gòu)建記賬主頁面）
Asp.net+Vue2構(gòu)建簡(jiǎn)單記賬WebApp之五（vue.js構(gòu)建記賬頁面）
Asp.net+Vue2構(gòu)建簡(jiǎn)單記賬WebApp之六（vue.js構(gòu)建記賬統(tǒng)計(jì)頁面）
源碼下載

一、前提

1、安裝好node.js
2、安裝好npm
3、安裝好vue-cli

這里寫圖片描述

如何安裝這里就跳過，網(wǎng)上一大推。
當(dāng)然裝上npm的淘寶鏡像更好

二、構(gòu)建項(xiàng)目

1、進(jìn)入項(xiàng)目文件夾

這里寫圖片描述

2、生成項(xiàng)目

執(zhí)行 vue init webpack MyBill

這里寫圖片描述

3、查看

利用vue-cli 構(gòu)建的文件夾如下

這里寫圖片描述

4、初始化項(xiàng)目
cd mybill
npm install

這里寫圖片描述

5、 用node運(yùn)行試試
npm run dev 執(zhí)行后會(huì)自動(dòng)打開瀏覽器
退出的話，可以直接Ctrl+C，按兩次c。

這里寫圖片描述

三、結(jié)構(gòu)介紹

1、使用自己喜歡的工具打開這個(gè)項(xiàng)目文件夾
我喜歡使用webstorm

這里寫圖片描述

四、發(fā)布（asp.net 就只用發(fā)布的東西）

1、 發(fā)布
npm run build

這里寫圖片描述

這里寫圖片描述

2、在我們.net項(xiàng)目中引入發(fā)布的內(nèi)容
對(duì)于調(diào)試，我們引入也可以，因?yàn)闃?gòu)建的時(shí)候已經(jīng)在我們的項(xiàng)目下面了。只要知道位置就可以的。

這里寫圖片描述

3、 在asp.net 項(xiàng)目中訪問這個(gè)頁面
啟動(dòng)調(diào)試，瀏覽器輸入相對(duì)頁面地址可以看見一片空白，我們哪里錯(cuò)了？

這里寫圖片描述

4、 修改node發(fā)布配置后從新發(fā)布項(xiàng)目

這里寫圖片描述

這里寫圖片描述