項目腳手架
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)檔。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發