准備工作
新建工程
必要庫
檢查node、webpack、vue-cli、vue 等是否已安裝，如果沒有，使用npm install -g 安裝。
使用vue-cli初始化vue 項目
這里我選擇了使用vue路由、ESLint語法規范，另外兩個測試模塊暫時用不到都填n，關於使用vue webpack 模板的介紹可參考文檔。
安裝依賴項
npm install
校驗項目是否初始化成功
npm run dev
構建工程
與后端同時編譯
打開NotesMVCVue.csproj文件，添加如下代碼。
修改webpack生成路徑
在asp.net core 項目中我們習慣將靜態文件放到wwwroot 目錄下，現在我們只需修改下webpack 配置文件即可。
- 修改config/index.js 文件。
- 生成項目，wwwroot目錄如下。
前后端交互
安裝axios
npm install axios --save-dev
--save-dev以省掉手動修改package.json文件的步驟。
創建一個方法，返回Json數據
在HomeCotroller中添加如下代碼
public JsonResult GetPersonInfo()
{
var person = new
{
Name = "張三",
Age = 22,
Sex = "男"
};
return Json(person);
}
引入axios
在main.js中引入axios。由於在其他組件中無法使用axios命令，所以需要將axios改寫為Vue的原型屬性。
import axios from 'axios' //引入axios
Vue.prototype.$ajax=axios //修改Vue的原型屬性
前端設置
在HelloWorld.vue中添加如下代碼
mounted() {
//GET
this.$ajax({
method: 'get',
url: '/Home/GetPersonInfo',
}).then(response => {
let _data = response.data;
this.msg = "hello," + _data.name;
}).catch(function (err) {
console.log(err)
})
}
查看結果
重新編譯項目，正常情況下會得到如下頁面，表明配置成功。
修改默認路由
在.netcore中訪問網站，其實默認路由到/home/index，現在我們希望直接訪問/index.html。
方法：在startup.cs中，添加如下代碼
DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Add("index.html"); //將index.html改為需要默認起始頁的文件名.
app.UseDefaultFiles(options);
app.UseStaticFiles();
這是我們就可以訪問到vue生成的頁面了。
前端UI布局
引入iview
前端使用iview框架，首先引入
npm install iview --save-dev
mainjs導入
在main.js中添加
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
修改App.vue
從iview官網拷貝任意一個示例代碼，替換App.vue，重新編譯。此處用的是布局頁面。
