如何使用ASP.NET Core建立現代前端開發工作流程？

Question

如何使用現代前端開發工作流程在ASP.NET Core中設置Vue？我想使用ES6，WebPack，Babel，Vue，並且仍然受益於ASP.NET Core提供的功能。

Answer 1

我一直在越來越多地遇到這些問題。 .NET開發人員當然可以使用React，Angular 2或Vue等JavaScript框架，並在過程中使用現代前端開發工作流程。

完整的一步一步的指導是this blog post.

可用總之我可以用最終實現了以下先決條件：

1. Visual Studio 2017 RC
2. Node JS
3. WebPack Task Runner
4. Open Command Line for Visual Studio

讓我用Vue的框架要具體，但下面的步驟列表可以很容易地適應反應或角。

1. 與基本建立在Visual Studio 2017年

2. 安裝VUE-CLI使用命令行和NPM（包管理器）

   npm install -g vue-cli 
   

創建新的ASP.NET核心項目（.NET核心）

3. 與創建新的Vue項目VUE-CLI在網站文件夾的上下文中的命令行

   vue init webpack-simple 
   

4. 安裝NPM前端包

   npm install 
   

5. 移動wwwroot之下/ JS src文件夾並更新條目和輸出路徑字段webpack.config.js

6. 編寫代碼。使用Vue的基本Hello World應用程序將是：

   HTML：

   <div id="app" class="row"> 
       <h1>{{ title }}</h1> 
   </div> 
   

   的JavaScript：

   import Vue from 'vue'; 
   
   new Vue({ 
       el: '#app', 
       data: { 
       title: 'Hello World!' 
       } 
   }); 
   

   添加的參考配置圖的WebPack生成的JavaScript文件：

   <script src="~/js/dist/build.js"></script> 
   

7. 在Task Runner Explorer中的WebPack下運行Watch - Development任務o觀察更改並構建最終的JavaScript文件。在Visual Studio中運行解決方案（Ctrl + F5或F5）。