react、angular、vue 你更熟悉那個？下邊這個是vue的。
git：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全家桶的同時又希望可以代碼可以一鍵式編譯的話，或許可以試試這種方式。
轉自：https://blog.csdn.net/sD7O95O/article/details/82323129
原文地址：https://devopshub.cn/2018/08/30/dotnetcore-vue/