在 Visual Studio Code 中使用 Vue

Name: Visual Studio Code
Author: Microsoft

Vue.js 是一个流行的 JavaScript 库，用于构建 Web 应用程序和用户界面，Visual Studio Code 内置了对 Vue.js 构建块的支持，包括 HTML、CSS 和 JavaScript。为了获得更丰富的 Vue.js 开发环境，您可以安装 Vue - 官方 (以前为 Volar) 扩展，以获得 IntelliSense、TypeScript、格式化等支持。

注意：Vue 2 的支持已于 2023 年 12 月 31 日结束，因此使用 Vetur 扩展不推荐。您需要禁用 Vetur 才能使用 Vue - 官方扩展。

welcome to Vue

欢迎使用 Vue

我们将在此教程中使用 Vite 工具。如果您是 Vue.js 框架的新手，可以在 vuejs.org 网站上找到出色的文档和教程。

要安装和使用 Vite 和 Vue.js，您需要安装 Node.js JavaScript 运行时和 npm（Node.js 包管理器）。 npm 包含在 Node.js 中，您可以从 Node.js 下载获取。

提示：要测试您是否已正确安装 Node.js 和 npm，可以在您的机器上键入 node --version 和 npm --version。

要开始，请确保您位于您打算创建项目的父目录中。然后打开您的终端或命令提示符并键入

npm create vue@latest

系统将提示您安装 create-vue。

Create vue

这可能需要几分钟才能安装和执行 create-vue，它可帮助您搭建 Vue 项目。按照提示选择可选功能。如果您不确定某个选项，可以选择“否”。

Vue app scaffolding

项目创建完成后，导航到该项目并安装依赖项。安装其依赖项可能需要几分钟。

cd <your-project-name>
npm install

让我们通过键入 npm run dev 来快速运行我们的 Vue 应用程序，以启动 Web 服务器并在浏览器中打开该应用程序

npm run dev

您应该在浏览器中的 https://:5173 上看到“Welcome to your Vue.js App”。

要在 VS Code 中打开您的 Vue 应用程序，请从终端（或命令提示符）导航到 vue-project 文件夹并键入 code .

cd vue-project
code .

VS Code 将启动并在文件资源管理器中显示您的 Vue 应用程序。

Vue - 官方扩展

现在展开 src 文件夹并选择 App.vue 文件。您会注意到 VS Code 没有显示任何语法高亮显示，并且将其视为 纯文本，如您在右下角状态栏中所见。您还会看到一条通知，建议安装 Vue - 官方扩展用于 .vue 文件类型。

Vue 扩展为 VS Code 提供 Vue.js 语言功能（语法高亮显示、IntelliSense 和格式化）。

Vue - Official extension

从通知中按安装下载并安装 Vue 扩展。您应该在扩展视图中看到 Vue 扩展 正在安装。安装完成后（可能需要几分钟），安装按钮将更改为管理齿轮按钮。

您现在应该看到 .vue 已被识别为 Vue.js 语言的认可的文件类型，并且您拥有语言功能，例如语法高亮显示、括号匹配和悬停描述。

Vue language features

IntelliSense

当您开始在 App.vue 中键入时，您会看到智能建议或补全，既适用于 HTML 和 CSS，也适用于 Vue.js 特定项目，例如 Vue template 部分中的声明 (v-bind, v-for)

Vue.js suggestions

以及 scripts 部分中的 Vue 属性，例如 computed

Vue.js JavaScript suggestions

转到定义，速览定义

VS Code 中的 Vue - 官方扩展通过提供类型定义等语言服务功能来增强 Vue.js 开发体验。您可以使用以下方法访问这些功能：

转到定义 (F12)：直接导航到代码中的类型定义。
窥视定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10))：在不离开当前上下文的情况下内联查看类型定义。

要使用窥视定义，请按照以下步骤操作

将光标放在 App 上。
右键单击，将鼠标悬停在上下文菜单中的窥视上，然后选择 窥视定义。
将打开一个窥视窗口，其中显示来自 App.js 的 App 定义。

Vue.js peek definition

按 Escape 关闭速览窗口。

Hello World

让我们更新示例应用程序以呈现“Hello World！”。在 App.vue 中，将 HelloWorld 组件 msg 自定义属性文本替换为“Hello World！”。

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

保存 App.vue 文件 (⌘S (Windows, Linux Ctrl+S)) 后，Vite 的热模块替换 (HMR) 功能将立即在浏览器中反映更新，您将看到“Hello World！”。在我们继续学习 Vue.js 客户端调试时，请保持服务器运行。

提示：VS Code 支持自动保存，默认情况下它会在延迟后保存你的文件。在文件菜单中勾选自动保存选项以开启该功能，或者直接配置 files.autoSave 用户设置。

hello world

代码检查

Linters 分析您的源代码，并在您运行应用程序之前警告您潜在的问题。 Vue ESLint 插件 (eslint-plugin-vue) 检查 Vue.js 特定语法错误，这些错误在编辑器中显示为红色波浪线，也显示在问题面板中（视图 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M)）。

下面可以看到当 Vue linter 检测到模板中存在多个根元素时出现的错误

Vue linting

调试

您可以使用内置的 JavaScript 调试器调试客户端 Vue.js 代码。按照此对话使用 Vite/Vue.js 3 项目与 VS Code 使用 Microsoft Edge。

对于现已进入维护模式的 Vue CLI，请查看 VS Code 中的 Vue.js 调试菜谱，了解有关 VS Code 调试菜谱网站的更多信息。

另一个流行的 Vue.js 调试工具是 vue-devtools 插件，无论环境如何都可以使用它。

其他扩展

在扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 中键入 vue 以查找其他 Vue 扩展。
像 Vue VS Code Snippets 这样的扩展对于 Vue 代码片段非常有用。
还有扩展包，它们捆绑了其他人认为对 Vue.js 开发有用的扩展。

3/4/2026