如何设置 ASP.NET Core Vue.js？

Question

我需要将 Vue.js 与一些 ASP.NET Core MVC 视图集成。我选择 Vue.js 而不是其他选择，因为它似乎更简单——“ _只需通过 <script> 标签添加它_”，他们说。无需学习 Gulp/Grunt/Webpack/Browserify/等。

结果证明这是错误的。在我第一次尝试处理日期时，我尝试了一些扩展，比如 vue-moment 和 vue-datetime-picker ，取自这个官方 精选的与 Vue.js 相关的很棒的东西列表， 但我在这里碰壁了。虽然第一个不强制使用 require() JS 语法（CommonJS？），但第二个没有它就无法工作。其他扩展恰好是 'use babel' 和 imports / exports 这是需要编译的 ECMAScript 6。所以，大多数 Vue.js 库和工具确实需要一个编译器，加上 require() 语法，以及来自 Node 世界的所有东西？

我应该如何设置我的项目以使用 ASP.NET Core MVC + Vue.js，以便我可以使用 Vue 插件开发许多小型 Vue 应用程序（可以 require(stuff) ）？

原文由 Gerardo Grignoli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当我问出上述问题时，我完全迷路了。折腾了好几天了，还是没有全貌。我非常确定的是， 2016 年是学习 JavaScript 的艰难一年。

我想使用 Vue.js，因为它比其他选择更简单。更少的仪式、更少的样板、更少的代码。它被称为 Progressive Framework … 对！但只是在一定程度上。 Vue.js 并没有解决构建系统的 JavaScript 生态系统碎片化问题。

因此，您将不得不选择一方：您需要 JavaScript 模块和构建系统吗？

选项 1：保持简单：避免使用 JS 模块并构建系统。

遵循这条道路的原因：

• 你没有多少天的时间来学习 很多 东西。 （配置捆绑器、npm+package 依赖地狱、ES6 东西。）
• 您不想制作前沿的单页应用程序。在几个 HTML 页面中嵌入 Vue.js 似乎就足够了。
• HTTP/2 正在成为主流，因此像 Webpack 或 Browserify 这样的捆绑器将提供更少的好处，至少在性能上是这样。
• 最终 ES6 模块将直接在浏览器中得到支持，所以我们不需要将 最新 的 JavaScript 构建成 浏览器兼容的 JavaScript。

如果不花时间学习几年后可能会过时的东西，您将节省很多时间。

如果你遵循这条道路，一些建议：

• 只需使用 <script> 标签添加 JS 库。
• 仅使用浏览器就绪的 JavaScript 库。使用 require() 或 UMD 前缀 (function (root, factory) { 的代码需要您设置模块（因此它不是浏览器就绪的，除非您设置 CommonJS）。带有 import / export 语句的 JS 文件是用 ES6 编写的，因此也请避免使用它们。
• 使用 Bower 下载浏览器就绪库。避免 NPM（这意味着有一个模块系统）。

警告：您将无法使用高级 Vue.js 功能，例如 单文件组件 或 Vue Router，但这没关系。您将不得不手动执行一些操作。

选项 2：学习 JavaScript 模块 + 构建系统。

准备几天学习而不是编码。我只会简要解释 Webpack 如何为我工作。 Browserify 也可以，但我还没有尝试过。

我建议您花一些时间了解什么是 JavaScript 模块。然后学习构建它们并打包它们：我使用了 Webpack。它的文档不是很好，所以对我有用的是一步一步地遵循它的 教程。

此时，您可能已经听说 Webpack 也有一个内置的带有“热模块重新加载”的 Web 服务器。这是一个用于静态文件的 Web 服务器，仅用于开发。它的好处是每当你编辑一个 JS 模块时，浏览器会自动应用更改而无需刷新。这是一个非常好的但可选的功能。问题：这个内置的网络服务器与我们的网络服务器 (Kestrel) 竞争。因此，如果您想在开发期间尝试此功能，请使用 Microsoft 的 JavaScriptServices 存储库中提供的 Webpack ASP.NET Core 中间件。在那里您会找到我当前正在使用的 WebApplicationBasic 模板。我解剖了它，去掉了它的大部分部分，通过尝试使用它，我慢慢地理解了每个部分最初的用途。

使用 Webpack 时，你将主要使用 3 个工作流程：

• 内置开发模式：创建大文件，便于调试。将它与 ‘watch-mode’ 一起使用，因此无论何时修改文件，都会触发新的 Webpack 构建。
• 内置生产模式：创建小型缩小文件。对于“dotnet 发布”很有用。
• 使用 Webpack 的 Web 服务器和热模块重新加载 Webpack ASP.NET Core 中间件意味着您的应用程序将在后台运行 Webpack，构建并观察源文件的变化。编译输出不写入磁盘，仅保存在内存中并通过 HTTP 提供。 JavaScriptServices 中间件将来自 Kestrel 的请求转发到 Webpack 的 Web 服务器以完成这项工作。

无论您使用什么 Webpack 配置，都必须在 Webpack 配置中包含“vue-loader”。你可能会受到 Vue 的 webpack-simple template 的 启发。

我没有涵盖我想要的所有内容，但是这个主题太广泛了，我需要回去编码。请留下一些反馈。

原文由 Gerardo Grignoli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我来晚了，但现在有一个适用于 .NET Core 的模板，您可以使用单个命令构建它。在安装了 .NET Core 的 Windows 机器上，只需创建一个空文件夹，然后在该文件夹中运行此命令以显示可用模板列表：

 dotnet new

如果你没有所有的模板，你只需要运行它来安装 SPA 模板：

 dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

这是搭建一个新的 Vue 应用程序的支架：

 dotnet new vue

在几毫秒内，一个全新的 Vue.js 单页 Web 应用程序就构建好了，它带有一个工作的 .NET Core 后端，带有控制器、视图等。这太棒了。只需在 VS 或 VS Code 中打开项目即可。

还有 Aurelia、Angular、Knockout 和 React 的模板！您可以构建它们并比较每个解决相同问题的方式。 Angular 甚至开箱即用地进行服务器端预渲染！

我知道 .NET Core 有很长的路要走，但它正变得越来越棒！

原文由 Norbert Norbertson 发布，翻译遵循 CC BY-SA 4.0 许可协议