2023最新Vue3+40+个实用工具分享

这份清单是给谁的

整理这份清单的初衷是给自己用 —— 启动新 Vue 3 项目时,UI 库、状态管理、工具函数选哪个,经常要回去翻收藏。索性整理出来,顺便分享。

下面分四类:Vue 3 桌面端 UI 库、移动端 UI 库、配套工具、其他实用库。每个都附官网链接 + 一句话特点,自己挑。

Vue 3 桌面端 UI 库

1. Element Plus —— Vue 3 桌面端最常见的选择,组件最全,文档最完整。官网
2. Ant Design Vue —— 蚂蚁出品,后台管理系统主力选项,设计语言极成熟。官网
3. Naive UI —— TS 友好,主题定制能力强,图森团队出品,长尾文档稍少。官网
4. Arco Design —— 字节跳动企业级设计系统,有 React 和 Vue 双版本,内部业务大量验证过。官网
5. TDesign —— 腾讯出品,组件设计偏现代,工具链(脚手架)较完整。官网
6. Quasar —— 一套代码出 web/iOS/Android/Electron,适合多端项目,文档以英文为主。官网
7. PrimeVue —— 国外团队,组件数量极多(80+),海外项目主流之一。官网
8. Vuestic UI —— 自带 admin dashboard 模板,创业项目快速搭后台首选。官网
9. Headless UI —— 不带样式只带交互的组件,跟 Tailwind CSS 配合使用,自由度最高。官网
10. View UI Plus —— iView 的 Vue 3 版本,中文社区有传统积累。官网
11. BalmUI —— 基于 Material Design,适合做 Google 风格界面。官网
12. iDUX —— 完全 TypeScript 开发,类型推导最完整。官网
13. DevUI —— 华为出品,组件设计偏简洁。官网

怎么选:

• 纯后台管理系统 → Element Plus / Ant Design Vue / Arco
• 需要深度定制主题 → Naive UI / Headless UI
• 多端复用 → Quasar
• 团队 TS 重度使用 → Naive UI / iDUX

Vue 3 移动端 UI 库

1. Vant —— 有赞出品,移动端事实标准,文档/示例全,踩坑最少。官网
2. NutUI —— 京东风格,适合电商类移动应用,有专门的电商组件(SKU、地址、优惠券等)。官网
3. Varlet —— Material 风格,设计语言现代。官网
4. NutUI Bingo —— 京东抽奖组件库,营销活动现成用。官网

怎么选:90% 的场景闭眼选 Vant 不会错。电商场景考虑 NutUI。

开发体验工具

1. unplugin-vue-components —— antfu 出品,组件自动按需导入,不用每次写 import Button from ...,而且 tree-shakable。Element Plus / Vant 等主流库内置 resolver。GitHub
2. unplugin-auto-import —— 配套使用,ref / reactive / computed 这些 Vue API 也自动导入。

状态管理

1. Pinia —— Vue 3 官方推荐,Vuex 的继任者。API 简洁,TS 支持极好。
2. Vuex-persistedstate —— 还在用 Vuex 的话,这个把 state 持久化到 localStorage。GitHub
3. Vuex-persist —— 同上,TS 支持更好。官网
4. pinia-plugin-persistedstate —— Pinia 对应的持久化插件,基本上是 Pinia 项目标配。

工具函数 / 实用库

1. VueUse —— Vue 组合式 API 的"标准库",几百个 composable(useDebounce、useClipboard、useLocalStorage、useMouse...)。官网
2. @vueuse/motion —— 给元素加动画的 composable,声明式 API。官网
3. vue-i18n —— 国际化标配。官网
4. vue-router —— 官方路由,Vue 3 必装。
5. axios —— 不用多说,HTTP 库默认选择。
6. dayjs —— 替代 moment.js,体积 1/10,API 一样。
7. lodash-es —— 工具函数库,记得用 lodash-es 这个版本(ESM,tree-shakable),不要用老的 lodash。

表单 / 校验

1. VeeValidate 4 —— Vue 3 表单校验,基于 yup schema。
2. FormKit —— 表单组件 + 校验一体,UI 自带。
3. vuelidate 2 —— 轻量级 model-based 校验。

图表 / 可视化

1. ECharts —— 百度出品,组件最全,中文文档完整。配合 vue-echarts 用。
2. Chart.js —— 轻量易用,适合简单图表。
3. AntV G2 / G6 —— 蚂蚁系,图表 G2、关系图 G6。

富文本编辑器

1. Tiptap —— 基于 ProseMirror,API 优雅,Vue 3 支持好。
2. Wangeditor 5 —— 国产开源富文本,中文文档完整。
3. Quasar Editor —— 简单场景够用,跟 Quasar 框架一体。

动效 / 过渡

1. @vueuse/motion —— 见上。
2. gsap —— 复杂动效首选,跟 Vue 配合用 useGsap。
3. Lottie —— After Effects 导出的动画,适合品牌动画。

开发脚手架

1. Vite —— 不要再用 Webpack 起新项目了。
2. create-vue —— 官方脚手架,npm create vue@latest。
3. Nuxt 3 —— SSR / SSG / Hybrid 都行,大项目首选。
4. Vitesse —— antfu 的 Vue 3 starter,带 unplugin / auto-import / file-routing,开箱即用。

一句话总结

2024+ 的 Vue 3 主流栈差不多就是:Vite + Vue 3 + Pinia + Element Plus(或 Naive UI)+ VueUse + unplugin-auto-import + dayjs + axios。这套打底,90% 的中小项目够了。剩下的根据具体需求(图表、富文本、动效)加。

不要追求"用最新最酷"的库,生态稳定 + 文档完整 + 团队会用,远比技术新鲜重要。

—— 别看了 · 2026