Vue.js

外观

本页内容

工具 ​

在线试用 ​

尝试 Vue SFC 无需在您的机器上安装任何东西 - 有在线沙箱允许您在浏览器中直接进行操作

建议在报告错误时也使用这些在线沙箱提供重现

项目脚手架 ​

Vite ​

Vite 是一个轻量级且快速的构建工具，具有一流的 Vue SFC 支持。它由 Vue 的作者 Evan You 创建。

要开始使用 Vite + Vue，只需运行

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

此命令将安装和执行 create-vue，这是官方 Vue 项目脚手架工具。

  • 要了解更多关于 Vite 的信息，请查看 Vite 文档。
  • 要配置 Vite 项目中的 Vue 特定行为，例如向 Vue 编译器传递选项，请查看 @vitejs/plugin-vue 的文档。

上述提到的所有在线沙箱也支持将文件作为 Vite 项目下载。

Vue CLI ​

Vue CLI 是 Vue 的官方基于 webpack 的工具链。现在它处于维护模式，除非您依赖于特定的仅 webpack 功能，否则我们建议使用 Vite 开始新项目。在大多数情况下，Vite 将提供更优越的开发体验。

有关从 Vue CLI 迁移到 Vite 的信息

关于浏览器内模板编译的说明 ​

在没有构建步骤使用 Vue 的情况下，组件模板可以直接写入页面的 HTML 中，或者作为内联 JavaScript 字符串。在这种情况下，Vue 需要将模板编译器发送到浏览器以执行即时模板编译。另一方面，如果我们在构建步骤中预先编译模板，则编译器就不再需要了。为了减少客户端包的大小，Vue 提供了针对不同用例优化的不同“构建”版本。

  • 以 vue.runtime.* 开头的构建文件是 仅运行时构建：它们不包括编译器。当使用这些构建时，所有模板都必须通过构建步骤预先编译。

  • 不包含 .runtime 的构建文件是 完整构建：它们包含编译器和支持在浏览器中直接编译模板。但是，它们会增加 ~14kb 的负载。

我们的默认工具配置使用仅运行时构建，因为 SFC 中的所有模板都是预编译的。如果出于某种原因，您需要即使在构建步骤中也需要在浏览器中编译模板，您可以通过配置构建工具将 vue 别名到 vue/dist/vue.esm-bundler.js 来实现。

如果您正在寻找一个用于无需构建步骤的轻量级替代方案，请查看 petite-vue。

IDE 支持 ​

  • 推荐的 IDE 设置是 VS Code + Vue - 官方扩展（之前称为 Volar）。此扩展提供语法高亮、TypeScript 支持和模板表达式以及组件属性的智能感知。

    提示

    Vue - 官方扩展替换了 Vetur，我们之前为 Vue 2 开发的官方 VS Code 扩展。如果您当前已安装 Vetur，请确保在 Vue 3 项目中禁用它。

  • WebStorm 也提供了对 Vue SFCs 的出色内置支持。

  • 其他支持 语言服务协议（LSP）的 IDE 可以通过 LSP 利用 Volar 的核心功能。

浏览器开发工具 ​

Vue 浏览器开发工具扩展允许您探索 Vue 应用的组件树，检查单个组件的状态，跟踪状态管理事件，并分析性能。

devtools screenshot

TypeScript ​

主要文章： 使用 TypeScript 与 Vue。

  • Vue - 官方扩展 提供了对使用 <script lang="ts"> 块的 SFC 进行类型检查，包括模板表达式和跨组件属性验证。

  • 使用 vue-tsc 在命令行中执行相同的类型检查，或为 SFC 生成 d.ts 文件。

测试 ​

主要文章： 测试指南。

  • 推荐 Cypress 进行端到端测试。它还可以通过 Cypress 组件测试运行器 用于 Vue SFCs 的组件测试。

  • Vitest 是由 Vue / Vite 团队成员创建的一个专注于速度的测试运行器。它专门为基于 Vite 的应用程序设计，以提供单元/组件测试的相同即时反馈循环。

  • Jest 可以通过 vite-jest 与 Vite 一起使用。然而，这仅建议如果您有现有的基于 Jest 的测试套件需要迁移到基于 Vite 的设置，因为 Vitest 提供了类似的功能，但具有更高效的集成。

代码风格检查 ​

Vue 团队维护着 eslint-plugin-vue，这是一个支持 SFC 特定代码风格检查规则的 ESLint 插件。

之前使用 Vue CLI 的用户可能习惯于通过 webpack 加载器配置代码风格检查器。然而，当使用基于 Vite 的构建设置时，我们的建议是

  1. npm install -D eslint eslint-plugin-vue，然后遵循 eslint-plugin-vue 的 配置指南。

  2. 设置 ESLint IDE 扩展，例如 VS Code 的 ESLint，以便在开发过程中在您的编辑器中直接获得代码风格检查反馈。这还可以避免在启动开发服务器时产生不必要的代码风格检查开销。

  3. 在生产构建命令中运行 ESLint，以便在将代码部署到生产之前获得完整的代码风格检查反馈。

  4. （可选）设置如 lint-staged 这样的工具，以在 git 提交时自动检查修改过的文件。

代码格式化 ​

  • Vue - Official VS Code 扩展为 Vue SFC 提供了开箱即用的格式化功能。

  • 或者，Prettier 提供了内置的 Vue SFC 格式化支持。

SFC 自定义块集成 ​

自定义块被编译成对同一 Vue 文件的不同请求查询的导入。处理这些导入请求的责任在于底层的构建工具。

  • 如果使用 Vite，应使用自定义 Vite 插件将匹配的自定义块转换为可执行的 JavaScript。 示例

  • 如果使用 Vue CLI 或纯 webpack，则应配置 webpack 加载器以转换匹配的块。 示例

低级软件包 ​

@vue/compiler-sfc ​

此软件包是 Vue 核心单体存储库的一部分，并且始终与主 vue 软件包相同的版本一起发布。它作为主 vue 软件包的依赖项包含，并通过 vue/compiler-sfc 代理，因此您无需单独安装它。

此软件包本身提供了处理 Vue SFC 的低级实用工具，仅适用于需要在其自定义工具中支持 Vue SFC 的工具开发者。

提示

始终优先使用通过 vue/compiler-sfc 深度导入此软件包，因为这确保了其版本与 Vue 运行时保持同步。

@vitejs/plugin-vue ​

官方插件，为 Vite 提供 Vue SFC 支持。

vue-loader ​

官方的加载器，用于在webpack中提供Vue SFC支持。如果您使用Vue CLI，请参阅修改Vue CLI中vue-loader选项的文档。

其他在线沙箱 ​

在GitHub上编辑此页