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

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

2017-02-19 Dawid Dworak

虽然自我回答的问题是有效的做法....本身需要是对专题的第一次提问。这个问题不是 – charlietfl

我想纠正它。你能给我一个提示如何使它更多的话题？这些是我作为Stack Overflow作者的第一步。 –

也许这可能更适合[Documentation]（http://stackoverflow.com/documentation）。作为一个问题，它是过于宽泛每[不要问]（http://stackoverflow.com/help/dont-ask），并已经有几个密切的投票结果 – charlietfl

我一直在越来越多地遇到这些问题。 .NET开发人员当然可以使用React，Angular 2或Vue等JavaScript框架，并在过程中使用现代前端开发工作流程。

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

可用总之我可以用最终实现了以下先决条件：

让我用Vue的框架要具体，但下面的步骤列表可以很容易地适应反应或角。

与基本建立在Visual Studio 2017年
安装VUE-CLI使用命令行和NPM（包管理器）
```
npm install -g vue-cli 
```
与创建新的Vue项目VUE-CLI在网站文件夹的上下文中的命令行
```
vue init webpack-simple 
```
安装NPM前端包
```
npm install 
```
移动wwwroot之下/ JS src文件夹并更新条目和输出路径字段webpack.config.js

编写代码。使用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>

在Task Runner Explorer中的WebPack下运行Watch - Development任务o观察更改并构建最终的JavaScript文件。在Visual Studio中运行解决方案（Ctrl + F5或F5）。

来源

2017-02-19 14:31:37

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

回答

相关问题