經(jīng)過 10 年的演進，Vue 已經(jīng)構(gòu)建了一個極為豐富且強大的生態(tài)系統(tǒng)，本文就來盤點 2024 年 Vue 開發(fā)最能打的技術(shù)組合！

圖片

腳手架：create-vue

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

圖片

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

狀態(tài)管理：Pinia

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

Pinia 的特點如下：

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

圖片

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

路由：Vue Router

Vue Router 是 Vue.js 官方的路由管理器。Vue Router 通過簡單的 API 實現(xiàn)組件（和視圖）的映射，使得構(gòu)建單頁應(yīng)用變得簡單快捷。

圖片

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

構(gòu)建：Vite

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

圖片

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

調(diào)試：Vue DevTools

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

圖片

Vue DevTools 的特點如下：

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

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

測試：Vitest / Cypress

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

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

Vitest

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

圖片

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

Cypress

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

圖片

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

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

靜態(tài)站點生成器：VitePress

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

圖片

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

元框架：Nuxt

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

圖片

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

類型語言：TypeScript

TypeScript 是 JavaScript 的一個超集，添加了靜態(tài)類型檢查和一些其他的語言特性?，F(xiàn)代前端項目基本標(biāo)配 TypeScript，目前 TypeScript 的周下載量高達 5200 萬。

圖片

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

工具函數(shù)：Vueuse

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

圖片

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

代碼格式化：Eslint / Prettier

ESLint

ESLint 是一個 JavaScript 代碼檢查工具，它可以幫助開發(fā)者發(fā)現(xiàn)代碼中的問題，保證代碼質(zhì)量。它基于插件化的架構(gòu)，允許開發(fā)者自定義規(guī)則和配置，以適應(yīng)不同的項目需求。

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

圖片

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

Prettier

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

圖片

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 應(yīng)用中，實現(xiàn)前端界面的國際化。

圖片

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

Apollo/GraphQL 集成：apollo

Apollo 是一個用于 Vue.js 應(yīng)用的集成解決方案，它允許開發(fā)者通過聲明式查詢的方式在 Vue 組件中使用 GraphQL，實現(xiàn)數(shù)據(jù)的自動更新和高效管理。

圖片

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

Firebase 集成：VueFire

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

圖片

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

樣式：UnoCSS / Tailwind CSS

UnoCSS

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

圖片

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

Tailwind CSS

Tailwind CSS 是一個實用程序優(yōu)先的 CSS 框架，它提供了一組原子級別的CSS類，鼓勵開發(fā)者直接控制CSS類來構(gòu)建界面。Tailwind CSS 通過組合這些類可以快速構(gòu)建界面，適合喜歡直接控制樣式的開發(fā)者。

圖片

Github：https://github.com/tailwindlabs/tailwindcss

UI組件庫：Element UI / Ant Design Vue / Vant

國內(nèi)使用比較多的組件庫：

• Vue 2：Element UI
• Vue 3：Element Plus
• Vue 2 & Vue 3：Ant Design Vue
• 移動端、小程序：Vant

桌面應(yīng)用開發(fā)：Electron-Vite

Electron-Vite 是一個與 Vite 集成的 Electron 構(gòu)建工具，旨在提供更快、更精簡的開發(fā)體驗。它允許開發(fā)者使用 Vite 打包代碼，并處理 Electron 的獨特環(huán)境，包括 Node.js 和瀏覽器環(huán)境。

圖片

Github：https://github.com/alex8088/electron-vite

跨端應(yīng)用開發(fā)：uniapp

uni-app是一個基于Vue.js開發(fā)的跨平臺應(yīng)用開發(fā)框架。它允許開發(fā)者使用一套代碼同時構(gòu)建iOS、Android、H5、小程序等多個平臺的應(yīng)用，極大地提高了開發(fā)效率并降低了開發(fā)成本。

圖片

數(shù)據(jù)請求：Axios

Axios是一個基于Promise的網(wǎng)絡(luò)請求庫，它可以在Node.js和瀏覽器中運行，它提供了一種簡單而直觀的方式來發(fā)送各種HTTP請求，如GET、POST、PUT、DELETE等，并且易于對請求和響應(yīng)進行攔截處理。

圖片

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

可視化：Echarts

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

圖片

Github：https://github.com/apache/echarts

往期推薦