在 Vue3 + Vite 生態(tài)下，優(yōu)質的 npm 插件能大幅簡化開發(fā)流程、解決常見痛點、提升項目性能與交互體驗。本文整理了八大場景的實用插件，全部支持 Vue3 + TypeScript，開箱即用。

一、Vue3 核心生態(tài)（必裝）

1. Pinia — 狀態(tài)管理

替代 Vuex，Vue3 官方推薦，語法簡潔，無需 mutations。

npm install pinia

核心價值： 全局狀態(tài)共享，支持模塊化、熱更新。

2. Vue Router 4 — 路由管理

Vue3 專屬路由，支持動態(tài)路由、路由守衛(wèi)、懶加載。

npm install vue-router@4

3. @vueuse/core — 組合式工具集

上百個實用 Composition API 工具函數，無需重復造輪子。

npm install @vueuse/core

常用功能： 監(jiān)聽窗口大小、本地存儲、防抖節(jié)流、鼠標跟蹤、暗黑模式切換。

<script setup>
import { useLocalStorage } from '@vueuse/core'
const token = useLocalStorage('token', '')
</script>

二、UI 組件庫

三、網絡請求 & 數據處理

7. Axios — HTTP 請求

npm install axios

支持攔截器、取消請求，統一管理接口。

8. qs — 參數序列化

npm install qs

import qs from 'qs'
axios.post('/api', qs.stringify({ username: 'test' }))

9. dayjs — 時間處理

替代 Moment.js，體積更小，API 一致。

npm install dayjs

import dayjs from 'dayjs'
dayjs().format('YYYY-MM-DD HH:mm:ss')

四、表單 & 表格

五、交互 & 動畫增強

六、可視化 & 圖表

npm install echarts vue-echarts

七、工具類

18. lodash-es — 模塊化工具函數

npm install lodash-es

import { debounce, cloneDeep } from 'lodash-es'

const search = debounce(() => {}, 500)
const obj = cloneDeep({ a: 1 })

19. js-cookie — Cookie 操作

npm install js-cookie

20. nprogress — 加載進度條

npm install nprogress

路由切換、請求加載時顯示頂部進度條。

八、工程化 & 開發(fā)效率

九、使用建議

速查表