使用适用于 Visual Studio 的 Node.js 工具创建 Vue.js 应用程序
Visual Studio 支持在 JavaScript 或 TypeScript 中使用 Vue.js 框架进行应用开发。
以下新功能支持在 Visual Studio 中 Vue.js 应用程序开发：
- 对 .vue 文件中的脚本、样式和模板块的支持
- 识别 .vue 文件上的
lang属性 - Vue.js 项目和文件模板
先决条件
必须安装 Visual Studio 2017 版本 15.8 或更高版本，以及 Node.js 开发 工作负载。
重要
本文需要仅在 Visual Studio 2017 版本 15.8 中可用的功能。
如果尚未安装所需的版本，请安装 Visual Studio 2019。
如果需要安装工作负载但已有 Visual Studio，请转到 工具>获取工具和功能...，这将打开 Visual Studio 安装程序。 选择“Node.js 开发”工作负载，然后选择“修改”。
若要创建 ASP.NET Core 项目，必须安装 ASP.NET 和 Web 开发和 .NET Core 跨平台开发工作负载。
必须安装 Node.js 运行时。
如果未安装 LTS 版本，请从 Node.js 网站安装 LTS 版本。 一般情况下，Visual Studio 会自动检测已安装 Node.js 运行时。 如果未检测到已安装的运行时，可以将项目配置为在属性页中引用已安装的运行时。 （创建项目后，右键单击项目节点，然后选择 属性）。
使用 Node.js 创建 Vue.js 项目
可以使用新的 Vue.js 模板创建新项目。 使用模板是入门的最简单方法。 有关详细步骤，请参阅 使用 Visual Studio 创建第一个 Vue.js 应用。
使用 ASP.NET Core 和 Vue CLI 创建 Vue.js 项目
Vue.js 提供官方 CLI，快速搭建项目基架。 若要使用 CLI 创建应用程序，请按照本文中的步骤设置开发环境。
重要
这些步骤假定你已对 Vue.js 框架有一些经验。 如果没有，请访问 Vue.js 了解有关框架的详细信息。
创建新的 ASP.NET Core 项目
对于此示例，请使用空 ASP.NET 核心应用程序（C#）。 但是，可以从各种项目和编程语言中进行选择。
创建空项目
打开 Visual Studio 并创建新项目。
在 Visual Studio 2019 中，选择 在开始窗口中创建新项目。 如果启动窗口未打开，请选择 “文件”>“开始”窗口。 键入“Web 应用”，选择“C#”作为语言，然后选择“ASP.NET Core 空”，再选择“下一步”。 在下一个屏幕上，将项目命名为 客户端应用，然后选择 下一步。
选择建议的目标框架或 .NET 6，然后选择 创建。
如果未看到 ASP.NET Core Web 应用程序 项目模板，则必须首先安装 ASP.NET 和 Web 开发 的工作负荷以及.NET Core 开发工作负荷。 若要安装工作负载，请单击 “新建项目”对话框左窗格中的 打开 Visual Studio 安装程序 链接（选择“文件>新建>项目）。 Visual Studio 安装程序将启动。 选择所需的工作负荷。
配置项目启动文件
打开文件 ./Startup.cs，并将以下行添加到 Configure 方法：
app.UseDefaultFiles(); // Enables default file mapping on the web root. app.UseStaticFiles(); // Marks files on the web root as servable.
安装 Vue CLI
若要安装 vue-cli npm 模块，请打开命令提示符，键入版本 3.0（当前为 beta 版）npm install --g vue-cli 或 npm install -g @vue/cli。
使用 Vue CLI 搭建新客户端应用程序的基架
转到命令提示符，将当前目录更改为项目根文件夹。
键入
vue init webpack client-app，并在系统提示回答其他问题时执行步骤。说明
对于 .vue 文件，需要使用 Webpack 或类似的框架和加载程序来执行转换。 TypeScript 和 Visual Studio 不知道如何编译 .vue 文件。 捆绑也是如此：TypeScript 不知道如何将 ES2015 模块（即
import和export语句）转换为单个最终 .js 文件以在浏览器中加载。 同样，Webpack 在这里是最佳选择。 若要使用 MSBuild 从 Visual Studio 中驱动此过程，需要从 Visual Studio 模板开始。 目前，没有开箱即用的用于 Vue.js 开发的 ASP.NET 模板。
修改 Webpack 配置以将生成的文件输出到 wwwroot
打开文件 ./client-app/config/index.js，并将
build.index和build.assetsRoot更改为 wwwroot 路径：// Template for index.html index: path.resolve(__dirname, '../../wwwroot/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../../wwwroot'),
请每次触发构建时指定用于构建客户端应用的项目
在 Visual Studio 中，转到 Project>属性>生成事件。
在“预生成事件命令行”上，键入
npm --prefix ./client-app run build。
配置 Webpack 的输出模块名称
打开文件 ./client-app/build/webpack.base.conf.js，并将以下属性添加到输出属性：
devtoolModuleFilenameTemplate: '[absolute-resource-path]', devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
使用 Vue CLI 添加 TypeScript 支持
这些步骤需要 vue-cli 3.0，目前处于 beta 阶段。
转到命令提示符，将当前目录更改为项目根文件夹。
键入
vue create client-app，然后选择 手动选择功能。选择 TypeScript，然后选择其他所需选项。
遵循其余步骤并回答问题。
为 TypeScript 配置 Vue.js 项目
./client-app/tsconfig.json 打开文件，并将
noEmit:true添加到编译器选项。通过设置此选项，可以避免每次在 Visual Studio 中生成时干扰项目。
接下来，在 ./client-app/ 中创建 vue.config.js 文件，并添加以下代码。
module.exports = { outputDir: '../wwwroot', configureWebpack: { output: { devtoolModuleFilenameTemplate: '[absolute-resource-path]', devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]' } } };前面的代码配置 Webpack 并设置 wwwroot 文件夹。
使用 vue-cli 3.0 进行生成
vue-cli 3.0 的未知问题可能会阻止自动执行生成过程。 每次尝试刷新 wwwroot 文件夹时，都需要在 client-app 文件夹中运行命令 npm run build。
或者，您可以将 vue-cli 3.0 项目作为预生成事件通过 ASP.NET 项目属性进行构建。 右键单击项目，选择 属性，并在“生成”选项卡中的“预生成事件命令行” 文本框中包括以下命令。
cd ./client-app
npm run build
cd ../
局限性
lang属性仅支持 JavaScript 和 TypeScript 语言。 接受的值为：js、jsx、ts 和 tsx。lang属性不适用于模板或样式标记。由于其预处理的性质，.vue 文件中不支持对脚本块进行调试。
TypeScript 无法将 .vue 文件识别为模块。 需要一个包含如下代码的文件，以告知 TypeScript .vue 文件的外观（vue-cli 3.0 模板已包含此文件）。
// ./client-app/vue-shims.d.ts declare module "*.vue" { import Vue from "vue"; export default Vue; }使用 vue-cli 3.0 时，在项目属性上以预生成事件的形式运行命令
npm run build不起作用。