EP46 - 工具
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 的核心功能：
瀏覽器開發工具 - 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 提交時檢查已修改的文件。
格式 - Formatting
Vue - 官方 VS Code 擴展提供 Vue SFC 的內建格式化支持。
另外，Prettier 也提供內建的 Vue SFC 格式化支持。
SFC 自訂區塊整合 - SFC Custom Block Integrations
自訂區塊被編譯成對相同 Vue 文件的導入，並附有不同的請求查詢。這些導入請求的處理由底層的建置工具負責。
- 如果使用 Vite，應使用自訂的 Vite 插件將匹配的自訂區塊轉換為可執行的 JavaScript。範例
- 如果使用 Vue CLI 或普通的 webpack，則應配置 webpack loader 來轉換匹配的區塊。範例
低階套件 - Lower-Level Packages
@vue/compiler-sfc
此套件是 Vue 核心單一庫的一部分，始終與主 Vue 套件發佈相同版本。它作為主 Vue 套件的依賴關係被包含，並通過 vue/compiler-sfc 進行代理，因此無需單獨安裝。
該套件本身提供用於處理 Vue SFC 的低階工具，僅適用於需要在自訂工具中支持 Vue SFC 的工具開發者。
提示: 始終通過 vue/compiler-sfc 深度導入來使用此套件，因為這樣可以確保其版本與 Vue 執行時保持同步。@vitejs/plugin-vue
官方插件，提供 Vite 中的 Vue SFC 支持。
vue-loader
官方 loader，提供 webpack 中的 Vue SFC 支持。如果您正在使用 Vue CLI，還可以參考有關修改 Vue CLI 中 vue-loader 選項的文檔。
其他在線遊樂場 - Other Online Playgrounds
好多開發工具唷！好的框架工具少不了！！！
什麼時候我也來開發一款工具 www
- 在線嘗試 - Try it Online
- 專案鷹架 - Project Scaffolding
- Vite
- Vue CLI
- 瀏覽器內模板編譯的注意事項
- Ｑ：為什麼要遷移？
- IDE 支援 - IDE Support
- 瀏覽器開發工具 - Browser Devtools
- TypeScript
- 測試 - Testing
- 偵測錯誤 - Linting
- 格式 - Formatting
- SFC 自訂區塊整合 - SFC Custom Block Integrations
- 低階套件 - Lower-Level Packages
- @vue/compiler-sfc
- @vitejs/plugin-vue
- vue-loader
- 其他在線遊樂場 - Other Online Playgrounds
你可能也想看
