在 Visual Studio Code 中使用 Vue

Name: Visual Studio Code
Author: Microsoft

Vue.js 是一个流行的 JavaScript 库，用于构建 Web 应用程序用户界面，Visual Studio Code 内置支持 Vue.js 的构建块，例如 HTML、CSS 和 JavaScript。为了获得更丰富的 Vue.js 开发环境，您可以安装 Volar 和 Volar for TypeScript 扩展，它们支持 Vue.js IntelliSense、代码片段、格式化等等。

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

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://127.0.0.1:5173 上看到“Welcome to your Vue.js App”。您可以按 Ctrl+C 停止 vue-cli-service 服务器。

要在 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、代码片段、格式化）。

Volar extension

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

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

Vue language features

IntelliSense

当您开始在 App.vue 中输入时，您会看到针对 HTML 和 CSS 的智能建议或补全，也包括 Vue.js 特定项目的声明（v-bind、v-for），它们位于 Vue template 部分

Vue.js suggestions

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

Vue.js JavaScript suggestions

转到定义，快速查看定义

VS Code 通过 Volar 扩展 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）），使用 npm run dev 重新启动服务器，您将看到“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