在Visual Studio Code中使用Vue

Vue.js 是一个流行的 JavaScript 库，用于构建网页应用和用户界面，Visual Studio Code 内置支持 HTML、CSS 和 JavaScript Vue.js构建模块。为了更丰富的Vue.js开发环境，可以安装Vue - 官方（之前称为Volar）扩展，支持IntelliSense、TypeScript、格式化等。

注意：Vue 2 支持已于 2023 年 12 月 31 日结束，因此不推荐使用 Vetur 扩展。你需要禁用 Vetur 才能使用 Vue - 官方扩展。

欢迎来到 Vue

欢迎来到 Vue

本次教程将使用Vite工具。如果你是Vue.js框架的新手，可以在 vuejs.org 官网找到很棒的文档和教程。

要安装和使用 Vite、Vue.js，你需要安装Node.js JavaScript 运行时和 npm（Node.js包管理器）。NPM包含在Node.js中，你可以从Node.js下载中安装。

提示：为了测试你机器上是否正确安装了Node.js和NPM，你可以输入节点 --版本以及NPM——版本.

开始时，确保你在打算创建项目的父目录中。然后打开终端或命令提示符，输入：

npm create vue@latest

系统会提示您安装create-vue.

创建vue

安装和执行create-vue可能需要几分钟，它有助于你搭建Vue项目的支架。请按照提示获取可选功能。如果你对某个选项不确定，可以选择“否”。

Vue应用支架

项目创建后，进入并安装依赖。安装依赖可能需要几分钟。

cd <your-project-name>
npm install

让我们快速运行我们的Vue应用，输入以下内容NPM 运行开发启动网页服务器并在浏览器中打开应用：

npm run dev

你应该会在浏览器 http://localhost:5173 看到“欢迎使用您的Vue.js应用”。

要在 VS Code 中打开你的 Vue 应用程序，从终端（或命令提示符）中，导航到Vue项目文件夹和类型代码。:

cd vue-project
code .

VS Code 会在文件资源管理器中启动并显示你的 Vue 应用。

Vue - 官方扩展

现在展开SRC文件夹并选择App.vue档案。你会注意到 VS Code 没有显示任何语法高亮，文件被当作纯文本处理，你可以在右下角的状态栏看到。你还会看到一条推荐Vue的通知——官方扩展.vue文件类型。

Vue 扩展为 VS Code 提供了Vue.js语言功能（语法高亮、IntelliSense 和格式化）。

Vue - 官方扩展

通过通知，点击安装即可下载并安装Vue扩展。你应该会在扩展视图中看到“安装”中的Vue扩展。安装完成后（可能需要几分钟），安装按钮会切换为管理齿轮按钮。

你现在应该明白这一点.vue是Vue.js语言认可的文件类型，并且你有语法高亮、括号匹配和悬停描述等语言功能。

Vue 语言特性

IntelliSense

当你开始输入时App.vue你会看到HTML和CSS的智能建议或补全，还有针对Vue.js特定项目如声明的（V-绑定,v-for）在Vue中模板章节：

Vue.js建议

以及 Vue 性质，如计算在剧本章节：

Vue.js JavaScript 建议

前往定义，查看定义

Vue - VS Code 中的官方扩展通过提供语言服务功能（如类型定义）提升了Vue.js开发体验。您可以通过以下方式访问这些功能：

  • 进入定义（F12）：直接导航到代码中的类型定义。
  • 窥视定义（⌥F12（Windows Alt+F12，Linux Ctrl+Shift+F10））：在不离开当前上下文的情况下，内联查看类型定义。

使用Peek Definition时，请遵循以下步骤：

  1. 将光标移到上方应用.
  2. 右键点击，悬停在右键菜单中的“窥视”，选择窥视定义。
  3. 一个窥视窗口将打开，显示应用定义来源App.js.

Vue.js peek 定义

按Esc键关闭“窥视窗口”。

你好，世界

让我们更新示例应用，渲染“Hello World！”。在App.vue替换HelloWorld组件味精自定义属性文本，并附有“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）），Via 的热模块替换（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检测到模板中多个根元素时出现的错误：

Vue绒毛

调试

你可以用内置的JavaScript调试器调试客户端Vue.js代码。按照这个对话，使用 Vite/Vue.js 3 项目搭配 Microsoft Edge 的 VS Code。

对于目前处于维护阶段的 Vue CLI，请访问 VS Code 调试配方网站上的 VS Code 调试配方Vue.js相关内容了解更多信息。

另一个流行的调试Vue.js工具是vue-devtools插件，无论环境如何都可以使用。

其他扩展

  • 在扩展视图（⇧⌘X（Windows，Linux Ctrl+Shift+X））中输入 vue 来查找其他 Vue 扩展。

    Vue.js扩展

  • 像 Vue VS Code Snippets 这样的扩展对 Vue 的 snippets 很有帮助。

    Vue VS Code Snippets

  • 还有扩展包，捆绑了其他人认为对Vue.js开发有用的扩展。

    Vue.js扩展包