Vue3 + Vite 优质 NPM 插件大全

在 Vue3 + Vite 生态下，优质的 npm 插件能大幅简化开发流程、解决常见痛点、提升项目性能与交互体验。本文整理了八大场景的实用插件，全部支持 Vue3 + TypeScript，开箱即用。

一、Vue3 核心生态（必装）

1. Pinia — 状态管理

替代 Vuex，Vue3 官方推荐，语法简洁，无需 mutations。

npm install pinia

核心价值： 全局状态共享，支持模块化、热更新。

2. Vue Router 4 — 路由管理

Vue3 专属路由，支持动态路由、路由守卫、懒加载。

npm install vue-router@4

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

上百个实用 Composition API 工具函数，无需重复造轮子。

npm install @vueuse/core

常用功能： 监听窗口大小、本地存储、防抖节流、鼠标跟踪、暗黑模式切换。

<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

路由切换、请求加载时显示顶部进度条。

八、工程化 & 开发效率

九、使用建议

速查表