时间戳

首页 > 解决方案 > 在 .net 核心（2.1）项目中使用 Vue js 的最佳方法是什么

c# - 在 .net 核心（2.1）项目中使用 Vue js 的最佳方法是什么

问题描述

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

第 3 种和第 4 种方法几乎相似，唯一的区别是任务运行器正在执行构建和相关工作并手动添加 package.json 等，但在第 4 种方法中，CLI 显式命令用于构建应用程序。

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

标签： c#vue.jsasp.net-core-mvc

解决方案

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

选项 1 和 2

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

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

选项 3

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

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

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

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

建议

  1. 分离 SPA 和服务器 - 为您的 SPA 使用 Vue CLI（只需在您的核心应用程序中创建子文件夹并在那里生成）。使用 Core 只是为了实现 API SPA 将使用（可能还有一些错误后备路由）。
  2. 对于开发，您可以将 VS 设置为午餐核心开发服务器和 CLI 开发服务器以及从您的 SPA 到核心开发服务器的代理 API 请求。这里和这里的灵感。这样您就可以在不重新启动 SPA 的情况下更改您的 API，反之亦然...
  3. 我强烈建议您使用 Visual Studio Code 进行 SPA 开发。与 Vetur 扩展一起，与完整的 VS 相比，它提供了更出色的 Vue 开发体验（而且它是免费的！）
  4. 对于生产，将 Vue CLI 构建命令合并到核心项目构建过程中并不难

考虑

考虑一下服务器端渲染 (SSR)。对于许多类型的网站来说，它是一个交易破坏者，而且如果不使用 Node 作为您的服务器，这将非常困难

推荐阅读