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

圖片

腳手架：create-vue

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

圖片

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

狀態(tài)管理：Pinia

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

Pinia 的特點(diǎn)如下：

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

圖片

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

路由：Vue Router

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

圖片

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

構(gòu)建：Vite

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

圖片

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

調(diào)試：Vue DevTools

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

圖片

Vue DevTools 的特點(diǎn)如下：

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

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

測(cè)試：Vitest / Cypress

在 Vue 項(xiàng)目中，推薦使用以下框架進(jìn)行測(cè)試：

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

Vitest

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

圖片

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

Cypress

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

圖片

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

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

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

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

圖片

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

元框架：Nuxt

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

圖片

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

類型語(yǔ)言：TypeScript

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

圖片

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

工具函數(shù)：Vueuse

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

圖片

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

代碼格式化：Eslint / Prettier

ESLint

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

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

圖片

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

Prettier

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

圖片

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

語(yǔ)言支持：Vue - Official

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

圖片

國(guó)際化：vue-i18n

Vue I18n 是 Vue.js 的國(guó)際化插件，全稱為 internationalization，縮寫為 i18n。這個(gè)插件可以輕松地將本地化功能集成到 Vue.js 應(yīng)用中，實(shí)現(xiàn)前端界面的國(guó)際化。

圖片

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

Apollo/GraphQL 集成：apollo

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

圖片

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

Firebase 集成：VueFire

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

圖片

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

樣式：UnoCSS / Tailwind CSS

UnoCSS

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

圖片

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

Tailwind CSS

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

圖片

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

UI組件庫(kù)：Element UI / Ant Design Vue / Vant

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

• Vue 2：Element UI
• Vue 3：Element Plus
• Vue 2 & Vue 3：Ant Design Vue
• 移動(dòng)端、小程序：Vant

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

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

圖片

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

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

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

圖片

數(shù)據(jù)請(qǐng)求：Axios

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

圖片

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

可視化：Echarts

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

圖片

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

往期推薦