2024 Vue 生態工具最能打的組合！

作者：CUGGZ 2024-07-09 00:00:00

ECharts 是一個基于JavaScript的開源數據可視化圖表庫，最初由百度團隊開發并于2018年捐贈給 Apache 基金會。它提供了直觀、生動、可交互、可個性化定制的數據可視化圖表，廣泛應用于Web開發中，支持多種圖表類型和豐富的配置選項。

經過 10 年的演進，Vue 已經構建了一個極為豐富且強大的生態系統，本文就來盤點 2024 年 Vue 開發最能打的技術組合！

圖片

腳手架：create-vue

create-vue 是 Vue.js 官方推出的一個快速啟動 Vue.js 項目的腳手架工具。它基于 Vite，為開發者提供了一種快速、便捷的方式來創建 Vue 項目模板，降低了項目的入門門檻。

圖片

Github：https://github.com/vuejs/create-vue

狀態管理：Pinia

Pinia 是一個專為 Vue.js 設計的新一代狀態管理庫，它提供了更簡單、更靈活的 API，并且完全支持 Vue 3。Pinia 的設計旨在提供一種直觀的方式來管理 Vue.js 應用程序中的狀態，使得狀態管理變得更加簡單和高效。

Pinia 的特點如下：

簡潔的 API：Pinia 相比 Vuex 提供了更加簡單的 API，移除了 Vuex 中的 mutation，所有狀態變更都在 actions 中處理，這使得狀態管理更加直觀和統一。
組合式 API 風格：Pinia 完全兼容 Vue 3 的組合式 API，允許開發者以更加聲明式的方式管理狀態，這有助于提高代碼的可讀性和可維護性。
模塊化：Pinia 拋棄了 Vuex 中的 modules 概念，每個 store 都是一個獨立的模塊，這使得狀態管理更加清晰和靈活。
TypeScript 支持：Pinia 提供了良好的 TypeScript 支持，允許開發者在開發過程中獲得更好的類型推斷和靜態類型檢查，從而減少運行時錯誤。
插件系統：Pinia 提供了插件系統，用于擴展和增強其功能。通過插件，開發者可以添加中間件、持久化存儲、調試工具等來滿足特定的需求。

圖片

Github：https://github.com/vuejs/pinia

路由：Vue Router

Vue Router 是 Vue.js 官方的路由管理器。Vue Router 通過簡單的 API 實現組件（和視圖）的映射，使得構建單頁應用變得簡單快捷。

圖片

Github：https://github.com/vuejs/router

構建：Vite

Vite 是一個輕量級的、速度極快的下一代前端構建工具，對 Vue SFC 提供第一優先級支持。它最初是為 Vue 3 項目而創建的，但也可以用于其他框架，如 React、Svelte、Preact 等，目前已被多個前端框架作為默認的構建工具。

圖片

Github：https://github.com/vitejs/vite

調試：Vue DevTools

Vue DevTools 是一款旨在提升 Vue 開發者體驗的工具，它能夠顯著提升你在使用 Vue 應用時的生產力和調試能力。其可以通過 Vite 插件、瀏覽器擴展、獨立應用的形式來使用。

圖片

Vue DevTools 的特點如下：

實時編輯屬性：Vue DevTools 允許你直接實時編輯屬性，并立即看到更改的反映。這一特性特別適用于快速測試更改，而無需重啟應用程序或手動更新代碼。
時間旅行調試：最強大的特性之一是其進行時間旅行調試的能力。這意味著你可以檢查在任何時間點你的 store 的狀態，從而幫助你追蹤并理解應用程序狀態隨時間的變化情況。
Vue Router 集成：查看路由列表及其詳細信息。
Pinia 集成：Vue DevTools 集成了 Pinia，這是 Vue.js 的狀態管理庫。它允許集中查看和跟蹤應用中的所有自定義事件，包括事件的源組件、名稱、大小和每個事件的負載。

Github：https://github.com/vuejs/devtools-next

測試：Vitest / Cypress

在 Vue 項目中，推薦使用以下框架進行測試：

單元測試：Vitest
組件測試：Vitest 和 Cypress
端到端測試（E2E）：Cypress

Vitest

Vitest 是一個基于 Vite 的下一代測試框架，旨在提供快速、高效的單元測試體驗。它支持多種測試運行器、測試框架和覆蓋率報告工具，可以為組件提供即時響應的測試反饋。值得一提的是，Vitest 僅用了兩年時間，每周下載量就達到了 500w+。在 Vue 項目中，推薦使用 Vitest 進行單元測試和組件測試。

圖片

Github：https://github.com/vitest-dev/vitest

Cypress

Cypress 是一個用于編寫端到端測試的開源 JavaScript 測試框架，專注于提供簡單易用、可靠穩定的測試環境，用于測試Web應用。在 Vue 項目中，推薦其用于 E2E 測試，也可以通過 Cypress 組件測試運行器來給 Vue SFC 作單文件組件測試。

圖片

Github：https://github.com/cypress-io/cypress

Vue 官方文檔中提供了一份在 Vue 中進行測試的指南：https://cn.vuejs.org/guide/scaling-up/testing.html

靜態站點生成器：VitePress

VitePress 是基于 Vite 和 Vue 構建的現代化靜態站點生成器，是 VuePress 的繼承者和現代替代品。它專為構建快速、以內容為中心的網站而生，能夠輕松地將使用 Markdown 格式撰寫的源文件內容轉化為靜態 HTML 頁面，支持部署到任何平臺。

圖片

Github：https://github.com/vuejs/vitepress

元框架：Nuxt

Nuxt 是一個開源的服務端渲染（SSR）框架，建立在 Vue.js 之上，專注于提供一套完整的前端開發解決方案，旨在幫助開發者構建高性能、可擴展的Web應用。Nuxt 通過抽象出管理異步數據、中間件和路由等復雜配置，極大地簡化了開發流程。

圖片

Github：https://github.com/nuxt/nuxt

類型語言：TypeScript

TypeScript 是 JavaScript 的一個超集，添加了靜態類型檢查和一些其他的語言特性。現代前端項目基本標配 TypeScript，目前 TypeScript 的周下載量高達 5200 萬。

圖片

Vue 官方文檔中提供了一份在 Vue 中使用 TypeScript 的指南：https://cn.vuejs.org/guide/typescript/overview.html

工具函數：Vueuse

VueUse 是基于 Composition API 的實用函數集合，適用于 Vue 3 和 Vue 2，包含 200+ 實用函數（類似于Hooks）。

圖片

Github：https://github.com/vueuse/vueuse

代碼格式化：Eslint / Prettier

ESLint

ESLint 是一個 JavaScript 代碼檢查工具，它可以幫助開發者發現代碼中的問題，保證代碼質量。它基于插件化的架構，允許開發者自定義規則和配置，以適應不同的項目需求。

eslint-plugin-vue 是 Vue 官方維護的 ESLint 插件，專門用于對 Vue.js 組件進行靜態代碼分析。該插件提供了一系列的校驗規則，用于檢查 Vue 項目中的代碼風格、語法錯誤以及潛在的邏輯問題。

圖片

Github：https://github.com/vuejs/eslint-plugin-vue

Prettier

Prettier 是一個代碼格式化工具，它通過解析代碼并使用自己的規則重新打印代碼，從而實現風格一致。它支持多種編程語言，包括JavaScript、TypeScript、CSS、HTML等，并且可以與大多數編輯器集成。

圖片

Github：https://github.com/prettier/prettier

語言支持：Vue - Official

Vue - Official 是 Vue 官方提供的 VS Code 插件，它為 Vue SFC 提供了開箱即用的格式化功能。其原名為 Volar，于近期改名。

圖片

國際化：vue-i18n

Vue I18n 是 Vue.js 的國際化插件，全稱為 internationalization，縮寫為 i18n。這個插件可以輕松地將本地化功能集成到 Vue.js 應用中，實現前端界面的國際化。

圖片

Github：https://github.com/intlify/vue-i18n

Apollo/GraphQL 集成：apollo

Apollo 是一個用于 Vue.js 應用的集成解決方案，它允許開發者通過聲明式查詢的方式在 Vue 組件中使用 GraphQL，實現數據的自動更新和高效管理。

圖片

Github：https://github.com/vuejs/apollo

Firebase 集成：VueFire

VueFire 是 Vue 的一個官方插件，它簡化了 Vue 應用與 Firebase 的集成。Firebase 是 Google 提供的一個全棧式開發平臺，包括實時云數據庫、身份驗證、存儲和托管等服務。VueFire 通過提供一組簡單易用的API，使得在 Vue 應用中集成 Firebase 變得更加簡單和高效

圖片

Github：https://github.com/vuejs/vuefire

樣式：UnoCSS / Tailwind CSS

UnoCSS

UnoCSS 是一個由 Antfu 開發的 CSS 框架，旨在提供最小、最高效的樣式解決方案，適用于任何現代 Web 項目。其核心特點是即時、按需生成 CSS 樣式，通過原子化設計將 CSS 樣式拆分為最基本的元素，并僅在需要時生成相應的 CSS 規則，從而顯著減少加載時間和生成的 CSS 文件大小。

圖片