🚀 在 VS Code 中

在 Visual Studio Code 中使用 Vue

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

提示:要测试您是否已正确在机器上安装了 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 - 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 部分中声明(v-bindv-for)等 Vue.js 特定项

Vue.js suggestions

以及 scripts 部分中的 computed 等 Vue 属性

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

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 项目与使用 Microsoft Edge 的 VS Code 一起使用。

对于 现在处于维护模式的 Vue CLI,请查看 VS Code 调试recipes 站点上的 VS Code 中的 Vue.js 调试 recipe 以了解更多信息。

另一个流行的 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