在 Visual Studio Code 中使用 Vue
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。
欢迎使用 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 项目。按照提示操作可选功能。如果您不确定某个选项,可以选择“否”。
创建项目后,导航到该项目并安装依赖项。安装依赖项可能需要几分钟。
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 - Official 扩展。
Vue 扩展为 VS Code 提供 Vue.js 语言功能(语法突出显示、IntelliSense、代码片段、格式化)。
从通知中,按安装以下载并安装 Vue 扩展。您应该在“扩展”视图中看到 Vue 扩展正在安装。安装完成后(可能需要几分钟),安装按钮将更改为管理齿轮按钮。
您现在应该看到 .vue
是 Vue.js 语言的已识别文件类型,并且您具有语法突出显示、括号匹配和悬停描述等语言功能。
IntelliSense
当您开始在 App.vue
中键入时,您将看到 HTML 和 CSS 的智能建议或补全,以及 Vue template
部分中的 Vue.js 特定项,例如声明(v-bind
、v-for
)
以及 Vue 属性,例如 scripts
部分中的 computed
转到定义、查看定义
VS Code 通过 Volar 扩展 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)),使用 npm run dev
重新启动服务器,您将看到“Hello World!”。保持服务器运行,同时我们继续学习 Vue.js 客户端调试。
提示:VS Code 支持自动保存,默认情况下会在延迟后保存您的文件。选中“文件”菜单中的“自动保存”选项以启用自动保存或直接配置
files.autoSave
用户设置。
代码检查
代码检查器会分析您的源代码,并在您运行应用程序之前警告您潜在的问题。Vue ESLint 插件(eslint-plugin-vue)检查 Vue.js 特定的语法错误,这些错误在编辑器中显示为红色波浪线,并且也会显示在问题面板中(查看 > 问题 ⇧⌘M (Windows、Linux Ctrl+Shift+M))。
在下面,您可以看到当 Vue 代码检查器在模板中检测到多个根元素时出现的错误
调试
您可以使用内置的 JavaScript 调试器调试客户端 Vue.js 代码。请按照此对话在 VS Code 中使用 Microsoft Edge 使用 Vite/Vue.js 3 项目。
对于 现在处于维护模式的 Vue CLI,请查看 VS Code 调试配方站点上的VS Code 中的 Vue.js 调试配方以了解更多信息。
另一个用于调试 Vue.js 的流行工具是 vue-devtools 插件,无论环境如何都可以使用。
其他扩展
Volar 只是 VS Code 可用的众多 Vue.js 扩展之一。另一个推荐的扩展是 Volar for TypeScript。
您可以通过键入“vue”在“扩展”视图中搜索(⇧⌘X (Windows,Linux Ctrl+Shift+X))。
像 Vue VS Code 代码片段这样的扩展程序对于 Vue 代码片段可能很方便。
还有扩展包,它们捆绑了其他人发现对 Vue.js 开发有用的扩展。