在本 5-10 分钟的 Visual Studio 集成开发环境（IDE）简介中，你将创建并运行一个简单的 Vue.js Web 应用程序。
先决条件
必须安装 Visual Studio 以及 Node.js 开发工作负载。
如果尚未安装 Visual Studio 2019，请转到 Visual Studio 下载 页免费安装。
如果需要安装工作负载但已有 Visual Studio，请转到 “工具>获取工具和功能...”，这将打开 Visual Studio 安装程序。 选择 Node.js 开发 工作负荷，然后选择 “修改”。
必须安装 Node.js 运行时。
如果未安装，建议从 Node.js 网站安装 LTS 版本，以便与外部框架和库的最佳兼容性。 Node.js 是为 32 位和 64 位体系结构构建的。 Visual Studio 中的 Node.js 工具（包含在 Node.js 工作负载中）支持这两个版本。 只需要一个，Node.js 安装程序一次仅支持一个安装。
一般情况下，Visual Studio 会自动检测已安装 Node.js 运行时。 如果未检测到已安装的运行时，可以将项目配置为在属性页中引用已安装的运行时（创建项目后，右键单击项目节点，选择 “属性”，并设置 Node.exe 路径）。 可以使用 Node.js 的全局安装，也可以在每个 Node.js 项目中指定本地解释器的路径。
创建项目
首先，你将创建一个 Vue.js Web 应用程序项目。
如果尚未安装 Node.js 运行时，请从 Node.js 网站安装 LTS 版本。
有关详细信息，请参阅先决条件。
打开 Visual Studio。
创建新项目。
按 Esc 关闭开始窗口。 键入 Ctrl + Q 打开搜索框，键入 “基本 Vue.js”，然后选择 “基本”Vue.js Web 应用程序 （JavaScript 或 TypeScript）。 在出现的对话框中，键入名称 basic-vuejs，然后选择“ 创建”。
如果未看到 基本 Vue.js Web 应用程序 项目模板，则必须添加 Node.js 开发 工作负荷。 有关详细说明，请参阅 先决条件。
Visual Studio 将创建新项目。 新项目将在解决方案资源管理器（右窗格）中打开。
在安装应用程序所需的 npm 包时，请检查“输出”窗口（下部窗格）的进度。
在解决方案资源管理器中，打开 npm 节点，并确保已安装所有列出的 npm 包。
如果缺少任何包（感叹号图标），可以右键单击 npm 节点，然后选择 “安装缺少的 npm 包”。
浏览 IDE
在右窗格中查看 解决方案资源管理器 。
您的项目以粗体显示，使用您在“新建项目”对话框中提供的名称。 在磁盘上，此项目在您的项目文件夹中由一个 njsproj 文件表示。
顶级解决方案默认与项目同名。 一个解决方案由磁盘上的 sln 文件表示，是一个或多个相关项目的容器。
npm 节点显示任何已安装的 npm 包。 可以右键单击 npm 节点，以使用对话框搜索并安装 npm 包。
如果要安装 npm 包或从命令提示符运行 Node.js 命令，请右键单击项目节点，然后选择 “在此处打开命令提示符”。
将 .vue 文件添加到项目
在解决方案资源管理器中，右键单击任何文件夹（如 src/components 文件夹），然后选择“ 添加新>项”。
如果看不到所有项模板，请选择“显示所有模板”，然后选择项模板。
选择 JavaScript Vue 单文件组件 或 TypeScript Vue 单个文件组件，然后单击“ 添加”。
Visual Studio 将新文件添加到项目。
构建项目
接下来，选择 “生成>生成解决方案 ”以生成项目。
选中“输出”窗口以查看生成结果，然后从“显示输出”列表中选择“生成”。
JavaScript Vue.js 项目模板（以及旧版本的 TypeScript 模板）通过配置生成后事件来使用 build npm 脚本。 如果要修改此设置，请从 Windows 资源管理器打开项目文件（<projectname.njsproj>），找到以下代码行：
<PostBuildEvent>npm run build</PostBuildEvent>
运行应用程序
按 Ctrl+F5 （或 调试 > 启动而不调试）运行应用程序。
在控制台中，会看到一条消息 “启动开发服务器”。
然后，应用将在浏览器中打开。
如果未看到正在运行的应用，请刷新页面。
关闭 Web 浏览器。
祝贺你顺利完成这次快速入门！ 我们希望你能学到一些关于如何将 Visual Studio 集成开发环境 (IDE) 与 Vue.js 配合使用的知识。 若要深入了解其功能，请继续学习目录的 “教程 ”部分中的教程。