vue3-应用规模化-工具链

工具链

项目脚手架

Vite

Vite 是一个轻量级的、速度极快的构建工具,对 Vue SFC 提供第一优先级支持。作者是尤雨溪,同时也是 Vue 的作者!

要使用 Vite 来创建一个 Vue 项目,非常简单: (推荐)

npm create vue@latest

这个命令会安装和执行 create-vue,它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

Vue CLI

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链,它现在处于维护模式。我们建议使用 Vite 开始新的项目,除非你依赖特定的 Webpack 的特性。在大多数情况下,Vite 将提供更优秀的开发体验。

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

当以无构建步骤方式使用 Vue 时,

组件模板要么是写在页面的 HTML 中,

要么是内联的 JavaScript 字符串。

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

  • 前缀为 vue.runtime.* 的文件是只包含运行时的版本:不包含编译器,当使用这个版本时,所有的模板都必须由构建步骤预先编译。

  • 名称中不包含 .runtime 的文件则是完全版:即包含了编译器,并支持在浏览器中直接编译模板。然而,体积也会因此增长大约 14kb。

默认的工具链中都会使用仅含运行时的版本,因为所有 SFC 中的模板都已经被预编译了。如果因为某些原因,在有构建步骤时,你仍需要浏览器内的模板编译,你可以更改构建工具配置,将 vue 改为相应的版本 vue/dist/vue.esm-bundler.js。

如果你需要一种更轻量级,不依赖构建步骤的替代方案,也可以看看 petite-vue。

IDE 支持

推荐使用的 IDE 是 VSCode,配合 Vue 语言特性 (Volar) 插件。该插件提供了语法高亮、TypeScript 支持,以及模板内表达式与组件 props 的智能提示。

Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur,请确保在 Vue 3 的项目中禁用它。

WebStorm 同样也为 Vue 的单文件组件提供了很好的内置支持。

其他支持语言服务协议 (LSP) 的 IDE 也可以通过 LSP 享受到 Volar 所提供的核心功能:

Sublime Text 通过 LSP-Volar 支持。

vim / Neovim 通过 coc-volar 支持。

emacs 通过 lsp-mode 支持。

浏览器开发者插件

Vue 的浏览器开发者插件使我们可以浏览一个 Vue 应用的组件树,查看各个组件的状态,追踪状态管理的事件,还可以进行组件性能分析。

vue3-应用规模化-工具链_第1张图片

文档 (https://devtools.vuejs.org/guide/installation.html)

Chrome 扩展商店页 (https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

Firefox 所属插件页 (https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)

Edge 扩展 (https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl)

独立的 Electron 应用所属插件 (https://devtools.vuejs.org/guide/installation.html#settings-2)

TypeScript

具体细节请参考章节:配合 TypeScript 使用 Vue。

Volar 插件能够为

你可能感兴趣的:(vue3,vue.js,前端,javascript,vue)