直接跳到內容

工具鏈

在線嘗試

你不需要在機器上安裝任何東西,也可以嘗試基於單文件組件的 Vue 開發體驗。我們提供了一個在線的演練場,可以在瀏覽器中訪問:

  • Vue SFC 演練場
    • 自動隨著 Vue 倉庫最新的提交更新
    • 支持檢查編譯輸出的結果
  • StackBlitz 中的 Vue + Vite
    • 類似 IDE 的環境,但實際是在瀏覽器中運行 Vite 開發服務器
    • 和本地開發效果更接近

在報告 Bug 時,我們也建議使用這些在線演練場來提供最小化重現。

項目腳手架

Vite

Vite 是一個輕量級的、速度極快的構建工具,對 Vue SFC 提供第一優先級支持。作者是尤雨溪,同時也是 Vue 的作者!

要使用 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 是官方提供的基於 Webpack 的 Vue 工具鏈,它現在處於維護模式。我們建議使用 Vite 開始新的項目,除非你依賴特定的 Webpack 的特性。在大多數情況下,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 是 VSCode,配合 Vue - Official 擴展 (之前是 Volar)。該插件提供了語法高亮、TypeScript 支持,以及模板內表達式與組件 props 的智能提示。

    TIP

    Vue - Official 取代了我們之前為 Vue 2 提供的官方 VSCode 擴展 Vetur。如果你之前已經安裝了 Vetur,請確保在 Vue 3 的項目中禁用它。

  • WebStorm 同樣也為 Vue 的單文件組件提供了很好的內置支持。

  • 其他支持語言服務協議 (LSP) 的 IDE 也可以通過 LSP 享受到 Volar 所提供的核心功能:

瀏覽器開發者插件

Vue 的瀏覽器開發者插件使我們可以瀏覽一個 Vue 應用的組件樹,查看各個組件的狀態,追蹤狀態管理的事件,還可以進行組件性能分析。

devtools 截圖

TypeScript

具體細節請參考章節:配合 TypeScript 使用 Vue

  • Vue - Official 擴展能夠為 <script lang="ts"> 塊提供類型檢查,也能對模板內表達式和組件之間 props 提供自動補全和類型檢查。

  • 使用 vue-tsc 可以在命令行中執行相同的類型檢查,通常用來生成單文件組件的 d.ts 文件。

測試

具體細節請參考章節:測試指南

  • Cypress 推薦用於 E2E 測試。也可以通過 Cypress 組件測試運行器來給 Vue SFC 作單文件組件測試。

  • Vitest 是一個追求更快運行速度的測試運行器,由 Vue / Vite 團隊成員開發。主要針對基於 Vite 的應用設計,可以為組件提供即時響應的測試反饋。

  • Jest 可以通過 vite-jest 配合 Vite 使用。不過只推薦在你已經有一套基於 Jest 的測試集、且想要遷移到基於 Vite 的開發配置時使用,因為 Vitest 也能夠提供類似的功能,且後者與 Vite 的集成更方便高效。

代碼規範

Vue 團隊維護著 eslint-plugin-vue 項目,它是一個 ESLint 插件,會提供 SFC 相關規則的定義。

之前使用 Vue CLI 的用戶可能習慣於通過 webpack loader 來配置規範檢查器。然而,若基於 Vite 構建,我們一般推薦:

  1. npm install -D eslint eslint-plugin-vue,然後遵照 eslint-plugin-vue指引進行配置。

  2. 啟用 ESLint IDE 插件,例如 ESLint for VSCode,然後你就可以在開發時獲得規範檢查器的反饋。這同時也避免了啟動開發服務器時不必要的規範檢查。

  3. 將 ESLint 格式檢查作為一個生產構建的步驟,保證你可以在最終打包時獲得完整的規範檢查反饋。

  4. (可選) 啟用類似 lint-staged 一類的工具在 git commit 提交時自動執行規範檢查。

格式化

  • Vue - Official VSCode 插件為 Vue SFC 提供了開箱即用的格式化功能。

  • 除此之外,Prettier 也提供了內置的 Vue SFC 格式化支持。

SFC 自定義塊集成

自定義塊被編譯成導入到同一 Vue 文件的不同請求查詢。這取決於底層構建工具如何處理這類導入請求。

  • 如果使用 Vite,需使用一個自定義 Vite 插件將自定義塊轉換為可執行的 JavaScript 代碼。示例

  • 如果使用 Vue CLI 或只是 webpack,需要使用一個 loader 來配置如何轉換匹配到的自定義塊。示例

底層庫

@vue/compiler-sfc

這個包是 Vue 核心 monorepo 的一部分,並始終和 vue 主包版本號保持一致。它已經成為 vue 主包的一個依賴並代理到了 vue/compiler-sfc 目錄下,因此你無需單獨安裝它。

這個包本身提供了處理 Vue SFC 的底層的功能,並只適用於需要支持 Vue SFC 相關工具鏈的開發者。

TIP

請始終選擇通過 vue/compiler-sfc 的深度導入來使用這個包,因為這樣可以確保其與 Vue 運行時版本同步。

@vitejs/plugin-vue

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

vue-loader

為 webpack 提供 Vue SFC 支持的官方 loader。如果你正在使用 Vue CLI,也可以看看如何在 Vue CLI 中更改 vue-loader 選項的文檔

其他在線演練場

工具鏈已經加載完畢