工(gōng)具鏈

項目腳手架 ​

Vite ​

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

要使用(yòng) Vite 來(lái)創建一個 Vue 項目，非常簡單：

$ npm init vue@latest

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

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

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

上(shàng)面提到(dào)的兩種在線演練場也(yě)支持将文(wén)件作(zuò)爲一個 Vite 項目下(xià)載。

Vue CLI ​

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

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

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

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

浏覽器内模闆編譯注意事(shì)項 ​

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

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

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

默認的工(gōng)具鏈中都會(huì)使用(yòng)僅含運行時(shí)的版本，因爲所有 SFC 中的模闆都已經被預編譯了(le)。如果因爲某些(xiē)原因，在有構建步驟時(shí)，你(nǐ)仍需要浏覽器内的模闆編譯，你(nǐ)可以更改構建工(gōng)具配置，将 vue 改爲相應的版本 vue/dist/vue.esm-bundler.js。

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

IDE 支持 ​

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

TIP

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

WebStorm 同樣也(yě)爲 Vue 的單文(wén)件組件提供了(le)很(hěn)好(hǎo)的内置支持。

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

Sublime Text 通過 LSP-Volar 支持。

vim / Neovim 通過 coc-volar 支持。

emacs 通過 lsp-mode 支持。

TypeScript ​

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

Volar 插件能(néng)夠爲 <script lang="ts"> 塊提供類型檢查，也(yě)能(néng)對(duì)模闆内表達式和(hé)組件之間 props 提供自(zì)動補全和(hé)類型驗證。

使用(yòng) vue-tsc 可以在命令行中執行相同的類型檢查，通常用(yòng)來(lái)生成單文(wén)件組件的 d.ts 文(wén)件。

測試 ​

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

Cypress 推薦用(yòng)于 E2E 測試。也(yě)可以通過 Cypress 組件測試運行器來(lái)給 Vue SFC 作(zuò)單文(wén)件組件測試。

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

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

代碼規範 ​

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

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

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

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

将 ESLint 格式檢查作(zuò)爲一個生産構建的步驟，保證你(nǐ)可以在最終打包時(shí)獲得完整的規範檢查反饋。

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

格式化 ​

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

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

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

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

如果使用(yòng) Vite，需使用(yòng)一個自(zì)定義 Vite 插件将自(zì)定義塊轉換爲可執行的 JavaScript 代碼。示例。

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

底層庫 ​

@vue/compiler-sfc ​

文(wén)檔

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

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

TIP

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

@vitejs/plugin-vue ​

文(wén)檔

爲 Vite 提供 Vue SFC 支持的官方插件。

vue-loader ​

文(wén)檔

爲 webpack 提供 Vue SFC 支持的官方 loader。如果你(nǐ)正在使用(yòng) Vue CLI，也(yě)可以看(kàn)看(kàn)如何在 Vue CLI 中更改 vue-loader 選項的文(wén)檔。