簡(jiǎn)介

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

作者：盧偉

背景

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

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

要求

需要你的計(jì)算機(jī)安裝有

? .net core 2.0以上版本

? node、webpack、vue-cli、vue （npm install 默認(rèn)版本即可）

? visual studio 2017/vs code

初始化.net core 項(xiàng)目

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

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

使用vue-cli初始化vue 項(xiàng)目

? 若未安裝node,點(diǎn)擊下載鏈接:

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語(yǔ)法規(guī)范，另外兩個(gè)測(cè)試模塊暫時(shí)用不到都填n，關(guān)于使用vue webpack 模板的介紹可參考文檔:

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

參數(shù)說(shuō)明

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

3. 安裝依賴

cd DotnetCoreWithVue
npm install

4. 校驗(yàn)項(xiàng)目是否初始化成功。

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

同步構(gòu)建（前端+后端）

通過(guò)編輯項(xiàng)目文件，在項(xiàng)目文件編譯前先執(zhí)行npm命令。

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

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

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

3. 編譯查看結(jié)果，可以在輸出控制臺(tái)查看日志。

查看生成目錄

修改webpack生成路徑

在asp.net core 項(xiàng)目中我們習(xí)慣將靜態(tài)文件放到wwwroot 目錄下，現(xiàn)在我們只需修改下webpack 配置文件即可。

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

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

前后端交互

1. 修改controller的第一個(gè)方法，將返回?cái)?shù)據(jù)第一個(gè)改為：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，添加如下代碼，請(qǐng)求后端api，然后編譯項(xiàng)目。這里使用的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. 重新編譯項(xiàng)目

請(qǐng)求http://localhost:40051/#/ 驗(yàn)證代碼，端口號(hào)視應(yīng)用程序配置需自行修改。

總結(jié)

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

end

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

---

.NET社區(qū)新聞，深度好文，歡迎訪問(wèn)公眾號(hào)文章匯總 http://www.csharpkit.com

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。