如何使用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 框架来具体，但以下步骤列表可以很容易地适应React或Angular。

1. 使用Visual Studio 2017中的基本设置创建新的ASP.NET Core项目（.NET Core）

2. 使用命令行和npm（包管理器）

   安装vue-cli

   npm install -g vue-cli
   

3. 在网站文件夹的上下文中，在命令行中使用vue-cli创建新的Vue项目

   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任务，以监视更改并构建最终的JavaScript文件。在Visual Studio中运行解决方案（Ctrl + F5或F5）。