如何使用 ASP.NET 核心建立现代前端开发工作流程？

Question

如何使用现代前端开发工作流程设置 Vue with ASP.NET Core？我想使用 ES6、WebPack、Babel、Vue，并且仍然受益于 ASP.NET Core 必须提供的功能。

Answer 1

我越来越频繁地遇到这些问题。 .NET 开发人员当然可以使用 JavaScript 框架，如 React、Angular 2 或 Vue，并在此过程中利用现代 front-end 开发工作流程。

完整的分步指南可在 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 核心项目 (.NET Core)

2. 使用命令行和 npm（包管理器）安装 vue-cli

   npm install -g vue-cli
   

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

   vue init webpack-simple
   

4. 安装 npm front-end 包

   npm install
   

5. 将 src 文件夹移动到 wwwroot/js 下并更新 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!'
     }
   });
   

   在Layout中添加对WebPack生成的JavaScript文件的引用：

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

7. 运行 Task 运行ner Explorer 中 WebPack 下的 Watch - Development 任务，用于监视更改并构建最终的 JavaScript 文件。 运行Visual Studio中的解决方案（Ctrl+F5或F5）。