在 Visual Studio Code 中使用 Vue
Vue.js 是一个流行的 JavaScript 库,用于构建 Web 应用程序和用户界面,而 Visual Studio Code 内置了对 Vue.js 构建块 HTML、CSS 和 JavaScript 的支持。为了获得更丰富的 Vue.js 开发环境,你可以安装 Vue - Official(前身为 Volar) 扩展,以获得对智能感知(IntelliSense)、TypeScript、格式化等功能的支持。
注意:Vue 2 已于 2023 年 12 月 31 日停止支持,因此不推荐使用 Vetur 扩展。你需要禁用 Vetur 才能使用 Vue - Official 扩展。
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 可能需要几分钟,它可以帮助你搭建 Vue 项目的脚手架。按照提示选择可选功能。如果你不确定某个选项,可以选择“No”。
项目创建后,进入该项目目录并安装依赖项。安装依赖项可能需要几分钟。
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 - Official 扩展
现在展开 src
文件夹并选择 App.vue
文件。你会注意到 VS Code 没有显示任何语法高亮,而是将该文件视为纯文本,正如你在右下角状态栏中看到的那样。你还会看到一个通知,推荐为 .vue
文件类型安装 Vue - Official 扩展。
Vue 扩展为 VS Code 提供了 Vue.js 语言功能(语法高亮、智能感知和格式化)。
在通知中,按安装下载并安装 Vue 扩展。你应该会在扩展视图中看到 Vue 扩展正在安装。安装完成后(可能需要几分钟),安装按钮会变为管理齿轮按钮。
现在你应该看到 .vue
已被识别为 Vue.js 语言的文件类型,并且你拥有了语法高亮、括号匹配和悬停描述等语言功能。
智能感知
当你在 App.vue
中开始输入时,你会看到针对 HTML 和 CSS 的智能建议或补全,以及针对 Vue.js 特定项的建议,例如 Vue template
部分中的声明(v-bind
、v-for
):
以及 scripts
部分中的 Vue 属性,如 computed
:
转到定义,速览定义
VS Code 中的 Vue - Official 扩展通过提供类型定义等语言服务功能,增强了 Vue.js 的开发体验。你可以使用以下功能访问这些特性:
- 转到定义(F12):直接导航到代码中的类型定义。
- 速览定义(⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)):在不离开当前上下文的情况下内联查看类型定义。
要使用速览定义,请按照以下步骤操作:
- 将光标放在
App
上。 - 右键单击,在上下文菜单中将鼠标悬停在速览上,然后选择速览定义。
- 一个速览窗口将会打开,显示来自
App.js
的App
定义。
按 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
用户设置。
代码检查
Linter(代码检查工具)会分析你的源代码,并能在你运行应用程序之前警告你潜在的问题。Vue ESLint 插件(eslint-plugin-vue)会检查 Vue.js 特定的语法错误,这些错误在编辑器中显示为红色波浪线,并显示在问题面板中(查看 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M))。
下面是当 Vue linter 在模板中检测到多个根元素时显示的错误:
调试
你可以使用内置的 JavaScript 调试器调试客户端 Vue.js 代码。请参考这个讨论,了解如何在 VS Code 中使用 Microsoft Edge 调试 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 VS Code Snippets 这样的扩展对于 Vue 代码片段非常方便。
-
还有扩展包,它们捆绑了其他人认为对 Vue.js 开发有用的扩展。