文档阅读笔记

Appearance

工具链 ​

在线尝试 ​

Vue 单文件组件演练场

  • 自动更新最新版本Vue
  • 支持检查编译输出的结果

StackBlitz 中的 Vue + Vite

  • 类似IDE,可以在线编写代码,实时预览
  • 和本地开发效果接近

在报告 Bug 时，我们也建议使用这些在线演练场来提供最小化重现。

项目脚手架 ​

Vite ​

Vite 官方文档

Vite 是一个轻量级的、速度极快的构建工具，对 Vue 单文件组件提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者 使用 Vite 创建一个 Vue 3 项目：

# npm
npm create vue@latest

# pnpm
pnpm create vue@latest

# For Yarn Modern (v2+)
yarn create vue@latest

# For Yarn ^v4.11
yarn dlx create-vue@latest

Vue CLI ​

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目

浏览器内模板编译注意事项 ​

当以无构建步骤方式使用 Vue 时，组件模板要么是写在页面的 HTML 中，要么是内联的 JavaScript 字符串。在这些场景中， 为了执行动态模板编译，Vue 需要将模板编译器运行在浏览器中。相对的，如果我们使用了构建步骤，由于提前编译了模板， 那么就无须再在浏览器中运行了。为了减小打包出的客户端代码体积，Vue 提供了多种格式的“构建文件”以适配不同场景下的优化需求。

  • 前缀为vue.runtime.*的文件只包含运行时的版本,不包含模板编译器。因此，如果你使用的是这些文件，那么你必须在构建时预编译模板。
  • 名称中不包含runtime的文件则同时包含运行时和编译器。因此，如果你使用的是这些文件，那么你可以在浏览器中直接使用模板。