在 .net core (2.1) 项目中使用 Vue js 的最佳方式是什么

Question

在 .net core (2.1) 项目中使用 Vue js 的最佳方式是什么？我正在将 Visual Studio 2017 用于我的 .net core 应用程序。有多种方法可以将 vue 集成到我的 .net core 应用程序中：

第三种和第四种方法几乎相似，唯一的区别是任务运行程序正在执行构建和相关内容并手动添加 package.json 等，但在第四种方法中，使用 CLI 显式命令来构建应用程序。

我期待着将 vue 集成到我的 .net core (2.1) 应用程序中的最佳选择（Visual Studio 2017 是我使用 .net core 的 IDE 选择）

Answer 1

只是一些（希望有用的）评论

选项 1 和 2

这种方法非常简单，仅适用于非常简单的应用程序（也许还有 codeproject 演示）。为什么不好？

服务器渲染的 Razor 视图中的 Vue.js 代码（本例中为模板）。由于某些原因，这是一个非常糟糕的主意，维护对我来说最重要。它也很难调试 - 您需要重新编译并重新启动核心应用程序才能看到更改的结果（这使您的 SPA 重新加载并释放状态），没有源映射，没有热重载
Vue 模板（看起来像 HTML，但实际上它被转换为生成 Virtual DOM 的 JavaScript 代码）在运行时而不是在构建时编译。这不仅使您的应用程序第一次渲染需要更长的时间，而且还迫使您使用包含模板编译器的 Vue 构建，从而增加加载页面时浏览器需要下载和解析的 Javascript 量
您的 VueJS (Javascript) 代码未最小化，您不使用转译 (Babel) 或代码分割 (异步组件) 或 Vue 单文件组件
只是你没有 Webpack 和 Vue CLI 的力量

使用 npm/webpack/babel/eslint 的方式更好，但建议创建您自己的配置。主要论点是

JavaScript 框架和库倾向于依赖脚手架工具来设置和配置应用程序。虽然这确实可以让您更快地启动和运行，但它也会让您难以理解设置，并且常常会让您的配置变得臃肿。

当只有 Vue CLI 2.x 从模板生成项目时，这是有效的论点，并且在初始生成之后，维护配置的负担（以及更新构建时使用的许多npm 包）完全由开发人员承担。Vue CLI 3.x 极大地改变了这一点 - 它不仅生成初始应用程序，还为您管理所有工具配置。

本文做对的一件事是将 Vue 应用程序 (SPA) 与服务器分开（ASP.NET 仅用于提供静态文件）

独立的 SPA 和服务器 - 对您的 SPA 使用 Vue CLI（只需在核心应用程序中创建子文件夹并在其中生成）。使用 Core 只是为了实现 SPA 将要使用的 API（也许还有一些错误回退路线）。
对于开发，您可以设置 VS 来处理 Core Dev 服务器和 CLI 开发服务器，并代理从 SPA 到 Core 开发服务器的 API 请求。灵感在这里和这里。这样您就可以更改 API 而无需重新启动 SPA，反之亦然...
我强烈建议使用 Visual Studio Code 进行 SPA 开发。与 Vetur 扩展一起，它提供了比完整 VS 更优越的 Vue 开发体验（而且是免费的！）
对于生产来说，将 Vue CLI 构建命令合并到 Core 项目构建过程中并不难

考虑一下服务器端渲染（SSR）。对于许多类型的网站来说，这都是一个大问题，如果不使用 Node 作为服务器，它会非常困难