🚀 在 VS Code 中

在 Visual Studio Code 中使用 Vue

Vue.js 是一个流行的 JavaScript 库,用于构建 Web 应用程序和用户界面,Visual Studio Code 内置了对 Vue.js 构建块 HTMLCSSJavaScript 的支持。为了获得更丰富的 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。

提示:要测试您是否已在计算机上正确安装 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

您应该在浏览器中的 https://127.0.0.1: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 template 部分中 Vue.js 特定的项目,例如声明 (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)):以内联方式查看类型定义,无需离开当前上下文。

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

  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


代码检查

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

在下面,您可以看到当 Vue 代码检查器检测到模板中存在多个根元素时的错误

Vue linting

调试

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

对于 现在处于维护模式 的 Vue CLI,请查看 VS Code 调试recipes 站点上的 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