EP46 - 工具

Yidti

發佈於多拉B夢只能出布

2024/10/23 更新2024/10/23 發佈閱讀 10 分鐘

Tooling應該是介紹許多實用的工具吧！
這應該對開發會非常有幫助，快來挖寶

在線嘗試 - Try it Online

你不需要在本機上安裝任何東西即可嘗試 Vue SFC - 有一些線上平台允許你直接在瀏覽器中進行嘗試：

Vue SFC Playground：永遠從最新的提交部署專為檢查元件編譯結果設計
Vue + Vite on StackBlitz：類似 IDE 的環境，在瀏覽器中運行實際的 Vite 開發伺服器最接近本地設置

同時，我們也推薦在報告錯誤時使用這些線上平台提供的復現例子。

專案鷹架 - Project Scaffolding

Vite

Vite 是一個輕量且快速的建置工具，提供了對 Vue 單文件元件（SFC）的原生支持。它是由 Vue 的作者 Evan You 開發的！

要開始使用 Vite + Vue，只需執行以下命令：

$ npm create vue@latest

這條命令將安裝並執行 create-vue，官方的 Vue 專案鷹架工具。

要了解更多關於 Vite 的資訊，請查看 Vite 文檔。

要在 Vite 專案中配置 Vue 特定的行為，例如將選項傳遞給 Vue 編譯器，請參考 @vitejs/plugin-vue 的文檔。上述提到的線上平台也支持將文件下載為 Vite 專案。

Vue CLI

Vue CLI 是官方基於 webpack 的工具鏈。現在它處於維護模式，我們建議新專案使用 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。

Ｑ：為什麼要遷移？

性能提升: Vite 透過即時服務器啟動和快速熱模組替換（HMR）提供更快的開發體驗。這使得開發者在修改代碼時能立即看到變更，而不需重新載入整個頁面。
簡化的配置: Vite 的配置通常比 Vue CLI 更簡單，並且預設情況下已經針對現代瀏覽器進行優化。這減少了繁瑣的設定時間。
現代化的工具: Vite 使用 ES 模組作為內部依賴，這使得開發環境更符合現代前端開發的標準，並更好地支持未來的技術演進。
更好的支援: Vite 獲得了更多社群和生態系統的支援，許多新特性和最佳實踐也更快地集成進 Vite。
持續維護: Vue CLI 現在處於維護模式，未來不會有重大更新。選擇 Vite 可以確保你在長期內能夠獲得最新的功能和修復。

IDE 支援 - IDE Support

建議的 IDE 設定是 VS Code 加上 Vue - Official 擴展（以前稱為 Volar）。該擴展提供語法高亮、TypeScript 支援以及模板表達式和組件屬性的智能提示功能。

提示: Vue - Official 取代了我們之前為 Vue 2 提供的官方 VS Code 擴展 Vetur。如果你目前在 Vue 3 專案中安裝了 Vetur，請務必在 Vue 3 專案中禁用它。

WebStorm 也提供了對 Vue SFC 的優秀內建支援。

其他支援語言服務協議（LSP）的 IDE 也可以透過 LSP 利用 Volar 的核心功能：

Sublime Text 支援透過 LSP-Volar。
vim / Neovim 支援透過 coc-volar。
emacs 支援透過 lsp-mode。

瀏覽器開發工具 - Browser Devtools

Vue 瀏覽器開發工具擴展允許你探索 Vue 應用的組件樹，檢查單個組件的狀態，追蹤狀態管理事件，並分析性能。

TypeScript

主文章：使用 Vue 與 TypeScript。

Vue - 官方擴展提供對使用 <script lang="ts"> 區塊的 SFC 進行類型檢查，包括模板表達式和跨組件的屬性驗證。

使用 vue-tsc 可以從命令行執行相同的類型檢查，或生成 SFC 的 d.ts 文件。

測試 - Testing

主文章：測試指南。

推薦使用 Cypress 進行端到端（E2E）測試。它也可以通過 Cypress 組件測試運行器用於 Vue SFC 的組件測試。

Vitest 是由 Vue/Vite 團隊成員創建的測試運行器，專注於速度。它專為基於 Vite 的應用設計，以提供相同的單元/組件測試即時反饋循環。

Jest 可以通過 vite-jest 與 Vite 一起使用。然而，這僅在你需要將現有的基於 Jest 的測試套件遷移到基於 Vite 的設置時才建議使用，因為 Vitest 提供相似的功能，並具有更高效的整合。

偵測錯誤 - Linting

Vue 團隊維護 eslint-plugin-vue，這是一個支持 SFC 特定 linting 規則的 ESLint 插件。

之前使用 Vue CLI 的用戶可能習慣通過 webpack loaders 配置 linting 工具。然而，當使用基於 Vite 的建置設置時，我們的一般建議是：

npm install -D eslint eslint-plugin-vue

然後遵循 eslint-plugin-vue 的配置指南。

設置 ESLint IDE 擴展，例如 VS Code 的 ESLint，以便在開發過程中獲得編輯器內的 linting 反饋。這樣可以避免在啟動開發伺服器時產生不必要的 linting 費用。
將 ESLint 作為生產建置命令的一部分執行，以便在部署到生產環境之前獲得完整的 linting 反饋。
（可選）設置像 lint-staged 的工具，自動在 git 提交時檢查已修改的文件。