创建 Vue.js 项目

在此 5-10 分钟的 Visual Studio 集成开发环境(IDE)简介中,你将创建并运行一个简单的 Vue.js 前端 Web 应用程序。

先决条件

请确保安装以下软件:

创建应用

  1. 在“开始”窗口中(文件>开始窗口 打开),选择 创建新项目

    显示创建新项目屏幕截图

  2. 在顶部的搜索栏中搜索 Vue,然后为 JavaScript 或 TypeScript 选择 Vue App

    显示选择模板的屏幕截图

    从 Visual Studio 2022 版本 11 开始,模板名称已从 独立 JavaScript Vue 项目 更改为 Vue App

  3. 为项目和解决方案命名,然后选择 下一步

  4. 选择 创建,然后等待 Visual Studio 创建项目。

查看项目属性

使用默认项目设置可以生成和调试项目。 但是,如果需要更改设置,请在解决方案资源管理器中右键单击项目,选择 属性,然后转到 LintingBuildDeploy 部分。

对于调试器配置,请使用 launch.json

备注

launch.json 存储与“调试”工具栏中 “开始”按钮相关联的启动设置。 目前,launch.json 必须位于 .vscode 文件夹下。

生成项目

选择“生成”>“生成解决方案”以生成项目

启动项目

F5 或选择窗口顶部的 “开始”按钮,你将看到命令提示符,例如:

  • VITE v4.4.9 在 780 毫秒内准备就绪

    备注

    请检查控制台输出中的消息,例如提示您更新 Node.js版本的消息。

接下来,你会看到基本 Vue.js 应用!

后续步骤

对于 ASP.NET Core 集成:

使用 Vue 创建 ASP.NET Core 应用