使用针对 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 运行时。
如果未安装，请从 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 Core 应用程序 (C#)。 但是，可以从各种不同的项目和编程语言中进行选择。
创建一个空项目
打开 Visual Studio 并创建一个新项目。
在 Visual Studio 2019 中的“启动”窗口上，选择“新建项目”。 如果“开始”窗口未打开，请选择“文件”>“启动窗口”。 键入“Web 应用”，选择“C#”作为语言，然后选择“ASP.NET Core 空”，再选择“下一步”。 在下一个屏幕上，将项目命名为“client-app”，然后选择“下一步”。
选择建议的目标框架或 .NET 6，然后选择“创建”。
如果没有看到“ASP.NET Core Web 应用程序”项目模板，则必须先安装“ASP.NET 和 Web 开发”工作负载和“.NET Core”开发工作负载 。 若要安装工作负载，单击“新建项目”对话框左窗格中的“打开 Visual Studio 安装程序”链接（选择“文件”>“新建”>“项目”） 。 Visual Studio 安装程序启动。 选择所需工作负载。
配置项目启动文件
打开文件 ./Startup.cs，并将以下行添加到配置方法 ：
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 是最佳选择。 若要在 Visual Studio 中使用 MSBuild 推动此过程，需要从 Visual Studio 模板开始。 目前，没有现成的 ASP.NET 模板用于 Vue.js 开发。
修改 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 中，转到“项目”>“属性”>“生成事件” 。
在“预生成事件命令行”上，键入
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 支持
这些步骤需要当前仍处于 beta 版本的 vue-cli 3.0。
转到命令提示符，并将当前目录更改为项目根文件夹。
键入
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。
或者，可以使用 ASP.NET 项目属性将 vue-cli 3.0 项目生成为预生成事件。 右键单击项目，选择“属性”，并包含“预生成事件命令行”文本框中“生成”选项卡中的以下命令 。
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作为预生成的事件运行。