在 VS Code 中试试

在 Visual Studio Code 中使用 Vue

Vue.js 是一个用于构建 Web 应用和用户界面的流行 JavaScript 库,Visual Studio Code 内置支持 Vue.js 的构建块 HTMLCSSJavaScript。为了获得更丰富的 Vue.js 开发体验,你可以安装 Vue - Official(以前称为 Volar)扩展,以获得 IntelliSense、TypeScript、格式化等支持。

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


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 --versionnpm --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

你应该能在浏览器中访问 http://localhost: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 - Official 扩展。

Vue 扩展为 VS Code 提供了 Vue.js 语言特性(语法高亮、IntelliSense 和格式化)。

Vue - Official extension

在通知中,按“安装”下载并安装 Vue 扩展。你应该会在“扩展”视图中看到 Vue 扩展正在“安装”。安装完成后(可能需要几分钟),“安装”按钮将变为“管理”齿轮按钮。

现在你应该会看到 .vue 是 Vue.js 语言识别的文件类型,并且你拥有语法高亮、括号匹配和悬停描述等语言特性。

Vue language features

IntelliSense

当你在 App.vue 中开始输入时,你将看到 HTML 和 CSS 的智能建议或补全,以及 Vue template 部分中 Vue.js 特定项(例如声明 v-bindv-for)的建议或补全

Vue.js suggestions

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

Vue.js JavaScript suggestions

转到定义,查看定义

VS Code 中的 Vue - Official 扩展通过提供语言服务特性(例如类型定义)来增强 Vue.js 开发体验。你可以使用以下方式访问这些特性

  • 转到定义 (F12):直接导航到代码中的类型定义。
  • 查看定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)):以内联方式查看类型定义,无需离开当前上下文。

要使用查看定义,请按照以下步骤操作

  1. 将光标放在 App 上。
  2. 右键单击,在上下文菜单中将鼠标悬停在“查看”上,然后选择“查看定义”。
  3. 将打开一个查看窗口,显示来自 App.jsApp 定义。

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


Linting

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

下面你可以看到当 Vue lint 工具检测到模板中有多个根元素时出现的错误

Vue linting

调试

你可以使用内置的 JavaScript 调试器调试客户端 Vue.js 代码。按照此讨论使用 Microsoft Edge 在 VS Code 中调试 Vite/Vue.js 3 项目。

对于现已进入维护模式的 Vue CLI 项目,请查看 VS Code 调试技巧网站上的在 VS Code 中调试 Vue.js 技巧以了解更多信息。

另一个用于调试 Vue.js 的流行工具是 vue-devtools 插件,无论在何种环境下都可以使用。

其他扩展

  • 在“扩展”视图(⇧⌘X (Windows、Linux Ctrl+Shift+X))中搜索 vue 来查找其他 Vue 扩展。

    Vue.js extensions

  • Vue VS Code Snippets 等扩展对于 Vue 代码片段非常方便。

    Vue VS Code Snippets

  • 还有扩展包,它们捆绑了其他用户认为对 Vue.js 开发有用的扩展。

    Vue.js Extension Pack