使用 VSCode 开发 Vue

关键点

• 使用 VSCode 开发 Vue 需要安装特定扩展，如 Volar 和 Volar for TypeScript。
• 创建 Vue 项目需使用 npm create vue@latest，并配置开发环境。
• 可选插件如 Vetur 和 Auto Close Tag 可提升开发效率，但非必需。

准备工作

确保已安装 Node.js 和 npm，版本需满足 Vue 3 要求（建议 Node.js 18.3 或更高）。下载地址：Node.js 官网。

安装和配置步骤

1. 安装 VSCode

• 从 VSCode 官网 下载并安装，建议选择简体中文版本。

1. 安装扩展

• 打开 VSCode 扩展市场（快捷键 Ctrl+Shift+X），搜索并安装：
  • Volar：提供 Vue.js 智能提示。
  • Volar for TypeScript：增强 TypeScript 支持。
  • Vue – Official：打开 .vue 文件时会提示安装，支持语法高亮等。

1. 创建 Vue 项目

• 打开终端，运行：
  bash npm create vue@latest
• 按提示输入项目名称（如 my-vue-app），选择是否使用 TypeScript、Vue Router 等。

1. 安装依赖

• 进入项目目录：
  bash cd my-vue-app
• 运行：
  bash npm install

1. 启动开发服务器

• 运行：
  bash npm run dev
• 浏览器会自动打开 [[invalid url, do not cite])，显示 Vue 应用。

1. 在 VSCode 中打开项目

• 在终端运行：
  bash code .
• VSCode 会显示项目结构，开始开发。

1. 使用开发功能

• 享受语法高亮、IntelliSense（如 v-bind、v-for）和定义查看（快捷键 Alt+F12 Windows 或 ⌥F12 Mac）。

额外优化

• 可选插件包括 Vetur（Vue 语法高亮）、Auto Close Tag（自动关闭标签）等，具体安装可搜索扩展市场。
• 中国大陆用户可使用 cnpm 加速：
• 安装 cnpm：
  bash npm install -g cnpm --registry=https://registry.npm.taobao.org
• 使用 cnpm 创建项目：
  bash cnpm create vue@latest

---

使用 VSCode 开发 Vue 的详细调研笔记

以下是关于使用 VSCode 开发 Vue 的全面调研，涵盖所有相关细节和背景信息，适合深入了解。

背景与方法概述

Vue 是一个流行的 JavaScript 框架，用于构建 Web 应用和用户界面。VSCode 是微软开发的一个免费、开源代码编辑器，支持多种编程语言，并提供代码高亮、智能代码补全、调试等功能。调研发现，VSCode 内置支持 Vue 的核心构建块（HTML、CSS、JavaScript），但为了获得更丰富的开发体验，需安装特定扩展，如 Volar 和 Volar for TypeScript。调研中，菜鸟教程、VSCode 官方文档和 CSDN 博客提供了丰富的中文资源，适合初学者和高级开发者。

详细安装和配置步骤

1. 准备工作：Node.js 和 npm 安装

• Vue 项目通常通过 Vite 或 Webpack 构建，依赖 Node.js 环境，因此需先安装 Node.js。
• 要求 Node.js 版本为 18.3 或更高，确保支持 Vue 3 的最新特性。
• 下载地址：Node.js 官网。
• 验证安装：运行 node -v 和 npm -v 检查版本。

2. 安装 VSCode

• 从 VSCode 官网 下载最新版本，建议选择简体中文语言包。
• 安装完成后，打开 VSCode，熟悉界面和扩展市场（通过 Ctrl+Shift+X 访问）。

3. 安装必要的扩展

• Volar：提供 Vue.js 的智能提示、语法高亮和语言服务，推荐用于 Vue 3 开发。
• Volar for TypeScript：增强 TypeScript 支持，适合使用 TypeScript 的项目。
• Vue – Official：官方推荐的扩展，当打开 .vue 文件时，VSCode 会提示安装，提供语法高亮、括号匹配和悬停提示。
• 安装方法：在扩展市场搜索上述名称，点击“安装”即可。
• 调研中发现，Volar 是 Vue 3 的首选，取代了旧的 Vetur 扩展（Vetur 主要支持 Vue 2，2023 年 12 月 31 日后停止维护，Vue 2 LTS）。

4. 创建 Vue 项目

• 使用 create-vue 创建项目是官方推荐的方法，步骤如下：
• 打开终端，运行：
  bash npm create vue@latest
• 系统会提示选择项目名称、是否使用 TypeScript、Babel、ESLint 等选项，按需选择。
• 示例：输入项目名称为 runoob-vue3-app，选择是否使用 TypeScript（是/否），是否引入 Vue Router（是/否）等。
• 如果在中国大陆，建议使用 cnpm 加速：
• 安装 cnpm：
  bash npm install -g cnpm --registry=https://registry.npm.taobao.org
• 使用 cnpm 创建项目：
  bash cnpm create vue@latest

5. 安装依赖

• 进入项目目录，例如：

  cd runoob-vue3-app

• 运行：

  npm install

• 如果使用 cnpm，运行：

  cnpm install

• 安装依赖可能需要几分钟，完成后项目准备就绪。

6. 启动开发服务器

• 运行：

  npm run dev

• 浏览器会自动打开 [[invalid url, do not cite])，显示 “Welcome to your Vue.js App” 或类似页面。
• 开发服务器支持热模块替换（HMR），修改代码后会自动刷新。
• 停止服务器使用 Ctrl+C。

7. 在 VSCode 中打开项目

• 从终端导航到项目目录，运行：

  code .

• VSCode 会打开项目，显示文件结构。你可以展开 src 文件夹，编辑 App.vue 等文件。
• 打开 .vue 文件时，VSCode 会提示安装 Vue – Official 扩展，点击“安装”以启用 Vue 语言特性。

8. 使用 VSCode 的 Vue 开发功能

• 支持的功能：
• 语法高亮：.vue 文件的 HTML、CSS 和 JavaScript 部分都会高亮显示。
• 括号匹配：自动匹配 HTML 标签和括号。
• 悬停提示：鼠标悬停在 Vue 组件或属性上显示描述。
• IntelliSense：提供智能提示，包括 Vue 特定语法（如 v-bind、v-for）和 JavaScript 特性（如计算属性）。
• 定义查看：使用快捷键 Alt+F12（Windows）或 ⌥F12（Mac）查看定义，关闭使用 Esc。
• 示例：在 App.vue 中输入 v-，VSCode 会提示 v-bind、v-for 等选项。

9. 额外配置和优化

• 可选插件：以下插件可进一步提升开发效率，但非必需：
• Vetur：提供 Vue 语法高亮，适合 Vue 2 项目，但对于 Vue 3，Volar 是更好的选择。
• vue2 snippets：提供 Vue 2 的代码片段，适合 Vue 2 开发。对于 Vue 3，可搜索相关代码片段。
• Auto Close Tag：自动关闭 HTML/XML 标签，提升编码效率。
• Auto Rename Tag：自动重命名配对的 HTML/XML 标签，减少手动修改。
• background：自定义 VSCode 背景图片，需在 settings.json 中配置。例如：
  json "workbench.colorCustomizations": { "activityBarBadge.background": "#007acc", "statusBar.background": "#007acc", "statusBarItem.remoteBackground": "#007acc", "titleBar.activeBackground": "#007acc" }, "peacock.color": "#007acc"
• css style formatter：格式化 CSS 代码，使用快捷键 Shift+Alt+F。
• 代码格式化和 linting：
• 使用 Vue ESLint 插件检测语法错误，显示为红色波浪线，可在“问题”面板查看（快捷键 Ctrl+Shift+M Windows 或 ⇧⌘M Mac）。
• 示例：检测模板中多个根元素问题，参考 Vue ESLint。
• 调试 Vue 应用：
• 使用 VSCode 内置 JavaScript 调试器，参考 Vite 调试讨论 或 Vue CLI 调试。
• 安装 vue-devtools 提供额外的调试功能。

技术细节与对比

以下表格总结不同扩展的优缺点：

扩展名称	主要功能	适用场景	备注
Volar	Vue 3 语法高亮、智能提示、TypeScript 支持	Vue 3 开发，推荐使用	取代 Vetur，官方推荐
Volar for TypeScript	增强 TypeScript 支持	使用 TypeScript 的 Vue 项目	与 Volar 配合使用
Vue – Official	.vue 文件支持，语法高亮、括号匹配	所有 Vue 项目	打开 .vue 文件时自动提示安装
Vetur	Vue 2 语法高亮	Vue 2 项目	2023 年 12 月 31 日后停止维护
Auto Close Tag	自动关闭 HTML/XML 标签	提高编码效率	可选，适合喜欢自动补全的用户
Auto Rename Tag	自动重命名配对标签	减少手动修改	可选，适合频繁修改标签的用户
background	自定义背景图片	个性化 VSCode 界面	需要重启 VSCode，配置在 settings.json

注意事项与限制

• Vue 3 不支持 IE8 及以下版本，需使用现代浏览器（如 Chrome、Firefox、Edge）。
• Volar 和 Vetur 不能同时使用，建议优先使用 Volar（Vue 3）或 Vetur（Vue 2）。
• 中国大陆用户可能面临 npm 速度慢的问题，推荐使用 cnpm 加速，参考 使用淘宝 NPM 镜像。
• 确保自动保存功能开启（文件 > 自动保存，或在 settings.json 中配置 files.autoSave）。

参考资料与社区资源

调研中发现，菜鸟教程和 CSDN 提供了丰富的中文讲解，适合初学者。官方文档则更权威，适合深入研究。以下是关键资源：

• 菜鸟教程提供了详细的安装步骤，包括扩展安装和项目创建：使用 VSCode 开发 Vue | 菜鸟教程。
• VSCode 官方文档提供了 Vue 开发的完整指南：在 Visual Studio Code 中使用 Vue。
• CSDN 博客也有图文教程，适合中国开发者：VsCode 从0开始打造 Vue 开发环境。

结论

综合来看，使用 VSCode 开发 Vue 非常简单且高效。通过安装 Volar 和 Volar for TypeScript 等扩展，并遵循上述步骤，可以快速设置一个适合 Vue 开发的环境。额外的插件如 Vetur 和 Auto Close Tag 可根据个人需求安装，进一步提升开发体验。针对中国用户，cnpm 可显著提升安装速度，值得尝试。

Key Citations

• 使用 VSCode 开发 Vue | 菜鸟教程 [https://www.runoob.com/vue3/vue3-vscode.html]
• 在 Visual Studio Code 中使用 Vue [https://vscode.js.cn/docs/nodejs/vuejs-tutorial]
• VsCode 从0开始打造 Vue 开发环境 [https://blog.csdn.net/qq_36148847/article/details/115178731]
• Node.js 官网 [https://nodejs.org/]
• VSCode 官网 [https://code.visualstudio.com/]
• Vue ESLint [https://eslint.vuejs.net.cn/]
• Vite 调试讨论 [https://github.com/vitejs/vite/discussions/4065#discussioncomment-1359932]
• Vue CLI 调试 [https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli]
• vue-devtools [https://devtools.vuejs.net.cn/]