.net core 集成vue

要求

 

須要你的計算機安裝有

 

• .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全家桶的同時又但願能夠代碼能夠一鍵式編譯的話，或許能夠試試這種方式。