簡介

以前我們總是喜歡用服務端渲染前端（雖然也有html+ajax這種做法），后來node誕生了，前端工具鏈（不如說生態）誕生了，大家都開始了前端的重構之路，本文將以一簡單案例介紹下我們是如何在.net core 中使用vue。

作者：盧偉

背景

最近在做一個項目，有前端也有后端，基于這輩子再也不可能寫es5了（原生js還是很重要滴），所以毅然決然的放棄了采用服務端渲染前端，但是呢，基于項目前期的規模不大，所以考慮把前后端放在一個repo里邊，當然發布也是同一網站路徑咯。這樣有一個好處就是不用考慮跨域的問題，將來如果分離重構的話也不困難，只需把跨域問題解決即可，無論是.net core的cros還是Nginx反代都可以很好的解決跨域問題。react、angular、vue，其中我最熟悉的就是vue，所以采用了vue（全家桶）來實現前端業務。在我們的項目中我將vue的打包發布集成到了.net core編譯中，也就是說在編譯.net core 項目的同時完成了前端的npm install 和npm run build。下文將會以一個簡單實例實現.net core 集成vue。源碼地址:?

https://github.com/WalkerLu/DotnetCoreWithVue.git。

要求

需要你的計算機安裝有

? .net core 2.0以上版本

? node、webpack、vue-cli、vue （npm install 默認版本即可）

? visual studio 2017/vs code

初始化.net core 項目

1. 首先打開vs 17(vs code也行)新建一個asp.net core 項目DotnetCoreWithVue。

2. 選擇API模板，若是想集成docker可以勾選下啟用docker支持。關于docker的詳細介紹可參考我們的另一篇文章使用TFS玩轉Docker自動化部署。

使用vue-cli初始化vue 項目

? 若未安裝node,點擊下載鏈接:

https://nodejs.org/dist/v8.11.4/node-v8.11.4-x64.msi，雙擊安裝即可。

? 若未安裝vue輸入命令行 npm install -g vue。

? 安裝vue-cli npm install -g vue-cli。Npm慢的話可以使用cnpm（淘寶npm鏡像）或者yarn。

1. 打開命令行工具，這里直接使用的vscode的終端插件。

2. 用webpack 初始化vue

vue init webpack

這里我選擇了使用vue路由、ESLint語法規范，另外兩個測試模塊暫時用不到都填n，關于使用vue webpack 模板的介紹可參考文檔:

https://vuejs-templates.github.io/webpack/

參數說明

? Project name? 輸入項目名稱
? Project description 輸入項目描述
? Author 作者
? Vue build 打包方式，回車就好了
? Install vue-router?? 選擇? Y 使用 vue-router，輸入 N 不使用
? Use ESLint to lint your code? 代碼規范
? Setup unit tests with Karma + Mocha? 單元測試
? Setup e2e tests with Nightwatch? E2E測試

3. 安裝依賴

cd DotnetCoreWithVue
npm install

4. 校驗項目是否初始化成功。

npm run dev，在瀏覽器中打開http://localhost:8080,看到如下頁面代表vue項目初始化成功。

同步構建（前端+后端）

通過編輯項目文件，在項目文件編譯前先執行npm命令。

1. 在vs 2017 中選中.csproj文件右鍵修改。

2. 在.csproj 文件中添加如下代碼，即表示在構建之前先執行 npm install 和npm run build。

<Target Name="PrecompileScript" BeforeTargets="BeforeBuild">
? <Exec Command="npm install " />
? <Exec Command="npm run build" />
</Target>

3. 編譯查看結果，可以在輸出控制臺查看日志。

查看生成目錄

修改webpack生成路徑

在asp.net core 項目中我們習慣將靜態文件放到wwwroot 目錄下，現在我們只需修改下webpack 配置文件即可。

1. 修改config/index.js 文件。

2. 重新編譯，查看生成文件路徑。

前后端交互

1. 修改controller的第一個方法，將返回數據第一個改為：dotnet core with vue。

cd DotnetCoreWithVue
npm install
// GET api/values
[HttpGet]
public ActionResult<IEnumerable<string>> Get()
?{
??return new string[] { "dotnet core with vue", "value2" };
??}??

2. 修改HelloWorld.vue，添加如下代碼，請求后端api，然后編譯項目。這里使用的requst 為小編封裝的axios，各位感興趣的話可以直接去github 查看代碼?

https://github.com/WalkerLu/DotnetCoreWithVue/blob/master/DotnetCoreWithVue/src/utils/request.js

?mounted () {
?request({?
?? url: 'api/values',
? ?method: 'get'
?? }).then(response => {
? console.log(response)
? this.msg = response.data[0]
? ? })
? ? ?}

3. 重新編譯項目

請求http://localhost:40051/#/ 驗證代碼，端口號視應用程序配置需自行修改。

總結

至此.net core 集成vue的基本操作都完成了，其中用的技術（.net core、vue、router、webpack、es6…）展開了來講都可以出一個系列了，當然網上也不乏文檔資料。故此文的的側重點在于如何開始dotnet core with vue ？對于技術細節也沒有深入探討，如果讀者有.net core 獲取vue 前端方面的話題或問題歡迎大家積極留言評論，我們一起探討學習。當然咯，重構前端也好，前后端分離也好都需要切合實際的選擇最合適自己的方案。如果剛好你既需要同時編寫前端和后端，且想使用VUE全家桶的同時又希望可以代碼可以一鍵式編譯的話，或許可以試試這種方式。

end

原文地址:?https://devopshub.cn/2018/08/30/dotnetcore-vue/

---

.NET社區新聞，深度好文，歡迎訪問公眾號文章匯總 http://www.csharpkit.com

總結

以上是生活随笔為你收集整理的记一次.net core 集成vue 实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。