本站点文档内容均翻译自code.visualstudio.com，仅供个人学习，如有差异请以官网为准。

在Visual Studio Code中使用Vue

Vue.js 是一个流行的JavaScript库，用于构建网页应用程序和用户界面，Visual Studio Code内置支持Vue.js的构建块 HTML、CSS和 JavaScript。为了拥有更丰富的Vue.js开发环境，您可以安装 Vue - Official（以前是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@最新

您将被提示安装创建-Vue输入：.

创建Vue

这可能需要几分钟来安装和执行create-vue，它可以帮助你创建Vue项目。按照提示选择可选功能。如果你对某个选项不确定，可以选择“否”。

Vue应用 scaffolding

一旦项目创建，导航到该项目并安装依赖项。安装其依赖项可能需要几分钟时间。

cd <你的项目名称>
npm install

让我们快速运行我们的Vue应用程序，输入npm 运行开发要启动Web服务器并在浏览器中打开应用程序：

npm 运行 开发

您应该在浏览器中看到 "Welcome to your Vue.js App" http://localhost:5173。

要使用 VS Code 打开你的 Vue 应用程序，请在终端（或命令提示符）中导航到Vue 项目文件夹 并 输入代码输入：

cd vue项目
代码 .

VS Code将启动并在文件资源管理器中显示您的Vue应用程序。

Vue - 官方扩展

现在扩展源文件夹并选择App.vue 文件。你会注意到 VS Code 没有显示任何语法高亮，并且将其视为 纯文本，如你可以在右下角的状态栏中看到的那样。你还会看到一条推荐 Vue - 官方 扩展的通知。.vue文件类型。

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

Vue - 官方扩展

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

现在你应该看到.vue是Vue.js语言的一种公认文件类型，并且您具有诸如语法高亮、括号匹配和悬停描述等语言功能。

Vue 语言特性

智能感知

当你开始输入App.vue, 你将会看到对HTML和CSS的智能建议或补全，同时也包括Vue.js特定项目，如声明v-bind，v-for) 在Vue中模板部分:

Vue.js 建议

以及Vue属性，例如计算在脚本部分:

Vue.js JavaScript 建议

转到定义，查看定义

The Vue - 官方 VS Code 扩展通过提供类型定义等语言服务功能来增强 Vue.js 开发体验。您可以使用以下方法访问这些功能：

  • 转到定义 (F12): 直接导航到代码中的类型定义。
  • 查看定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)): 在不离开当前上下文的情况下查看类型定义。

要使用Peek Definition，请按照以下步骤操作：

  1. 将光标放置在应用程序输入：.
  2. 右键单击，在上下文菜单中悬停在Peek，然后选择Peek Definition。
  3. 一个窥视Windows将打开，显示应用程序定义来自App.js输入：.

Vue.js 查看定义

按 Escape 键关闭预览Windows。

Hello World

让我们更新示例应用程序以渲染“Hello World!”。App.vue替换 HelloWorld 组件消息自定义属性文本与“Hello World!”。

<模板>
  <头部>
    <图像 alt="Vue 标志" 类="标志" 源="./资产/标志.svg" 宽度="125" 高度="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <主>
    <欢迎 />
  </主>
</模板>

一旦你保存App.vue 文件 (⌘S (Windows, Linux Ctrl+S)), Vite 的 热模块替换 (HMR) 功能将立即在浏览器中反映更新，并且您将看到 "Hello World!"。保持服务器运行，接下来我们将学习 Vue.js 客户端调试。

提示：VS Code 支持自动保存，这默认会在延迟后保存您的文件。请检查自动保存选项在文件菜单中以启用自动保存或直接配置文件.自动保存 用户 设置.

Hello World

代码检查

Linters 分析你的源代码，并且在你运行应用程序之前可以警告你潜在的问题。Vue ESLint 插件 (eslint-plugin-vue) 检查特定于 Vue.js 的语法错误，这些错误在编辑器中显示为红色波浪线，并且也会显示在 问题 面板 (视图 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M))。

在下面，您可以看到当Vue linter在模板中检测到多个根元素时出现的错误：

Vue 代码检查

调试

您可以使用内置的JavaScript调试器调试客户端的Vue.js代码。请按照此对话，使用Microsoft Edge在VS Code中使用Vite/Vue.js 3项目。

对于 Vue CLI，现在处于维护模式，请查看 Vue.js 在 VS Code 中调试 的 VS Code 调试 指南列表 网站以了解更多信息。

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

其他扩展

  • 在扩展视图中搜索 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 通过输入 vue 来查找其他 Vue 扩展。

    Vue.js 扩展

  • 像Vue VS Code Snippets这样的扩展对于Vue片段很有用。

    Vue VS Code 模板

  • 还有扩展包，这些扩展包将其他人发现对Vue.js开发有用的扩展捆绑在一起。

    Vue.js 扩展包