工(gōng)具鏈

項目腳手架 ​

Vite ​

Vite 是一(yī)個輕量級的、速度極快(kuài)的構建工(gōng)具，對 Vue SFC 提供第一(yī)優先級支持。作(zuò)者是尤雨溪，同時(shí)也是 Vue 的作(zuò)者！

要(yào)使用 Vite 來創建一(yī)個 Vue 項目，非常簡單：

$ npm init vue@latest

這(zhè)個命令會安裝和(hé)執行(xíng) create-vue，它是 Vue 提供的官方腳手架工(gōng)具。跟随命令行(xíng)的提示繼續操作(zuò)即可(kě)。

要(yào)學習更多關于 Vite 的知識，請(qǐng)查看(kàn) Vite 官方文檔。

若要(yào)了(le)解如(rú)何為(wèi)一(yī)個 Vite 項目配置 Vue 相關的特殊行(xíng)為(wèi)，比如(rú)向 Vue 編譯器傳遞相關選項，請(qǐng)查看(kàn) @vitejs/plugin-vue 的文檔。

上(shàng)面提到的兩種在線演練場也支持将文件作(zuò)為(wèi)一(yī)個 Vite 項目下(xià)載。

Vue CLI ​

Vue CLI 是官方提供的基于 Webpack 的 Vue 工(gōng)具鏈，它現在處于維護模式。我們建議(yì)使用 Vite 開(kāi)始新的項目，除非你依賴特定的 Webpack 的特性。在大多數(shù)情況下(xià)，Vite 将提供更優秀的開(kāi)發體驗。

關于從(cóng) Vue CLI 遷移到 Vite 的資源：

VueSchool.io 的 Vue CLI -> Vite 遷移指南

遷移支持工(gōng)具 / 插件

浏覽器內(nèi)模闆編譯注意事項 ​

當以無構建步驟方式使用 Vue 時(shí)，組件模闆要(yào)麽是寫在頁面的 HTML 中，或者是內(nèi)聯的 JavaScript 字符串。在這(zhè)些場景中，為(wèi)了(le)執行(xíng)動态模闆編譯，Vue 需要(yào)将模闆編譯器運行(xíng)在浏覽器中。相對的，如(rú)果我們使用了(le)構建步驟，由于提前編譯了(le)模闆，那(nà)麽就無須再在浏覽器中運行(xíng)了(le)。為(wèi)了(le)減小打包出的客戶端代碼體積，Vue 提供了(le)多種格式的“構建文件”以适配不同場景下(xià)的優化需求。

前綴為(wèi) vue.runtime.* 的文件是隻包含運行(xíng)時(shí)的版本：不包含編譯器，當使用這(zhè)個版本時(shí)，所有的模闆都(dōu)必須由構建步驟預先編譯。

名稱中不包含 .runtime 的文件則是完全版：即包含了(le)編譯器，并支持在浏覽器中直接編譯模闆。然而，體積也會因此增長(cháng)大約 14kb。

默認的工(gōng)具鏈中都(dōu)會使用僅含運行(xíng)時(shí)的版本，因為(wèi)所有 SFC 中的模闆都(dōu)已經被預編譯了(le)。如(rú)果因為(wèi)某些原因，在有構建步驟時(shí)，你仍需要(yào)浏覽器內(nèi)的模闆編譯，你可(kě)以更改構建工(gōng)具配置，将 vue 改為(wèi)相應的版本 vue/dist/vue.esm-bundler.js。

如(rú)果你需要(yào)一(yī)種更輕量級，不依賴構建步驟的替代方案，也可(kě)以看(kàn)看(kàn) petite-vue。

IDE 支持 ​

推薦使用的 IDE 是 VSCode，配合 Vue 語言特性 (Volar) 插件。該插件提供了(le)語法高亮、TypeScript 支持，以及模闆內(nèi)表達式與組件 props 的智能(néng)提示。

TIP

Volar 取代了(le)我們之前為(wèi) Vue 2 提供的官方 VSCode 擴展 Vetur。如(rú)果你之前已經安裝了(le) Vetur，請(qǐng)确保在 Vue 3 的項目中禁用它。

WebStorm 同樣也為(wèi) Vue 的單文件組件提供了(le)很(hěn)好的內(nèi)置支持。

其他(tā)支持語言服務協議(yì) (LSP) 的 IDE 也可(kě)以通(tōng)過 LSP 享受到 Volar 所提供的核心功能(néng)：

Sublime Text 通(tōng)過 LSP-Volar 支持。

vim / Neovim 通(tōng)過 coc-volar 支持。

emacs 通(tōng)過 lsp-mode 支持。

TypeScript ​

具體細節請(qǐng)參考章(zhāng)節：配合 TypeScript 使用 Vue。

Volar 插件能(néng)夠為(wèi) <script lang="ts"> 塊提供類型檢查，也能(néng)對模闆內(nèi)表達式和(hé)組件之間(jiān) props 提供自(zì)動補全和(hé)類型驗證。

使用 vue-tsc 可(kě)以在命令行(xíng)中執行(xíng)相同的類型檢查，通(tōng)常用來生成單文件組件的 d.ts 文件。

測試 ​

具體細節請(qǐng)參考章(zhāng)節：測試指南。

Cypress 推薦用于 E2E 測試。也可(kě)以通(tōng)過 Cypress 組件測試運行(xíng)器來給 Vue SFC 作(zuò)單文件組件測試。

Vitest 是一(yī)個追求更快(kuài)運行(xíng)速度的測試運行(xíng)器，由 Vue / Vite 團隊成員(yuán)開(kāi)發。主要(yào)針對基于 Vite 的應用設計，可(kě)以為(wèi)組件提供即時(shí)響應的測試反饋。

Jest 可(kě)以通(tōng)過 vite-jest 配合 Vite 使用。不過隻推薦在你已經有一(yī)套基于 Jest 的測試集、且想要(yào)遷移到基于 Vite 的開(kāi)發配置時(shí)使用，因為(wèi) Vitest 也能(néng)夠提供類似的功能(néng)，且後者與 Vite 的集成更方便高效。

代碼規範 ​

Vue 團隊維護着 eslint-plugin-vue 項目，它是一(yī)個 ESLint 插件，會提供 SFC 相關規則的定義。

之前使用 Vue CLI 的用戶可(kě)能(néng)習慣于通(tōng)過 webpack loader 來配置規範檢查器。然而，若基于 Vite 構建，我們一(yī)般推薦：

npm install -D eslint eslint-plugin-vue，然後遵照 eslint-plugin-vue 的指引進行(xíng)配置。

啓用 ESLint IDE 插件，比如(rú) ESLint for VSCode，然後你就可(kě)以在開(kāi)發時(shí)獲得規範檢查器的反饋。這(zhè)同時(shí)也避免了(le)啓動開(kāi)發服務器時(shí)不必要(yào)的規範檢查。

将 ESLint 格式檢查作(zuò)為(wèi)一(yī)個生産構建的步驟，保證你可(kě)以在最終打包時(shí)獲得完整的規範檢查反饋。

(可(kě)選) 啓用類似 lint-staged 一(yī)類的工(gōng)具在 git commit 提交時(shí)自(zì)動執行(xíng)規範檢查。

格式化 ​

Volar VSCode 插件為(wèi) Vue SFC 提供了(le)開(kāi)箱即用的格式化功能(néng)。

除此之外(wài)，Prettier 也提供了(le)內(nèi)置的 Vue SFC 格式化支持。

SFC 自(zì)定義塊集成 ​

自(zì)定義塊被編譯成導入到同一(yī) Vue 文件的不同請(qǐng)求查詢。這(zhè)取決于底層構建工(gōng)具如(rú)何處理這(zhè)類導入請(qǐng)求。

如(rú)果使用 Vite，需使用一(yī)個自(zì)定義 Vite 插件将自(zì)定義塊轉換為(wèi)可(kě)執行(xíng)的 JavaScript 代碼。示例。

如(rú)果使用 Vue CLI 或隻是 webpack，需要(yào)使用一(yī)個 loader 來配置如(rú)何轉換匹配到的自(zì)定義塊。示例。

底層庫 ​

@vue/compiler-sfc ​

文檔

這(zhè)個包是 Vue 核心 monorepo 的一(yī)部分，并始終和(hé) vue 主包版本号保持一(yī)緻。它已經成為(wèi) vue 主包的一(yī)個依賴并代理到了(le) vue/compiler-sfc 目錄下(xià)，因此你無需單獨安裝它。

這(zhè)個包本身提供了(le)處理 Vue SFC 的底層的功能(néng)，并隻适用于需要(yào)支持 Vue SFC 相關工(gōng)具鏈的開(kāi)發者。

TIP

請(qǐng)始終選擇通(tōng)過 vue/compiler-sfc 的深度導入來使用這(zhè)個包，因為(wèi)這(zhè)樣可(kě)以确保其與 Vue 運行(xíng)時(shí)版本同步。

@vitejs/plugin-vue ​

文檔

為(wèi) Vite 提供 Vue SFC 支持的官方插件。

vue-loader ​

文檔

為(wèi) webpack 提供 Vue SFC 支持的官方 loader。如(rú)果你正在使用 Vue CLI，也可(kě)以看(kàn)看(kàn)如(rú)何在 Vue CLI 中更改 vue-loader 選項的文檔。