1. 状态管理

（1）Pinia

Pinia 是最新一代的 Vue 轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成员在2019年11月重新设计的一个状态存储库，它允许你跨组件/页面共享状态，并且是响应式的，类似于 Vuex。

Github： github.com/vuejs/pinia

（2）Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Github： github.com/vuejs/vuex

（3）vuex-persist

vuex-persistedstate 是一个支持 Typescript 的Vuex插件，使你能够将应用程序的状态保存到持久存储中，例如 Cookies 或 localStorage。

Github： github.com/championswi…

2. 表单

（1）VeeValidate

vee-validate 是Vue.js的表单验证库，它允许验证输入并以熟悉的声明式样式或使用组合函数构建更好的表单 UI。

Github： github.com/logaretm/ve…

（2）vue-form-making

vue-form-making 是一个基于 vue 和 element-ui 实现的可视化表单设计器，使用了最新的前端技术栈，内置了 i18n 国际化解决方案，可以让表单开发简单而高效。

Github： github.com/GavinZhuLei…

（3）FormKit

FormKit 是一个面向 Vue 开发人员的表单创作框架，它使构建高质量的生产就绪表单的速度提高了 10 倍。

Github： github.com/formkit/for…

3. 文档

（1）VitePress

VitePress 是 VuePress 的继承者，建立在vite 之上。目前，正处于alpha阶段。它已经适合开箱即用的文档使用，但配置和主题 API 可能仍会在次要版本之间发生变化。

Github： github.com/vuejs/vitep…

（2）VuePress

VuePress 是一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。它是为了满足 Vue 自己的子项目文档的需求而创建的。

Github： github.com/vuepress/vu…

（3）Gridsome

Gridsome 是一个基于 Vue.js 构建的 Jamstack 框架，它让开发人员可以轻松地构建静态生成的网站和应用程序，这些网站和应用程序天生速度快。

Github： github.com/gridsome/gr…

4. 测试

（1）Vitest

Vitest 是一个由 Vite 提供支持的极速单元测试框架。其和 Vite 的配置、转换器、解析器和插件保持一致，具有开箱即用的 TypeScript / JSX 支持。

Github： github.com/vitest-dev/…

（2）Jest

Jest 是一个全面的 JavaScript 测试解决方案，专注于简洁明快。适用于大多数 JavaScript 项目。

Github： github.com/facebook/je…

（3）Mocha

mocha是一个功能丰富的javascript测试框架，运行在node.js和浏览器中，使异步测试变得简单有趣。Mocha测试连续运行，允许灵活和准确的报告，同时将未捕获的异常映射到正确的测试用例。

Github： github.com/mochajs/moc…

5. 可视化

（1）Vue ChartJS

vue-chartjs 是一个 Vue 对于 Chart.js 的封装，让用户可以在Vue中轻松使用Chart.js，很简单的创建可复用的图表组件，非常适合需要简单的图表并尽可能快地运行的人。 vue-chartjs抽象了基本逻辑，同时也暴露了Chart.js对象，让用户获得最大的灵活性。它支持 Vue 3 和 Vue 2。

Github： github.com/apertureles…

（2）Apache ECharts

Apache ECharts 是一款基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。它是用纯 JavaScript 编写的，基于zrender，是一个全新的轻量级画布库。!

GitHub： github.com/apache/echa…

（3）Vue-ECharts

Vue-ECharts 是 Apache ECharts 的 Vue.js 组件。使用 Apache ECharts 5，同时支持 Vue.js 2/3。

Github： github.com/ecomfe/vue-…

（4）Trois

Trois 是一个基于 Three.JS 的 Vue 3 可视化库，它是一个流行的 WebGL 库。 Three.JS 对桌面和移动设备都有很好的支持。该库允许我们使用 VueJS 组件轻松为网站创建 3D 效果。

Github： github.com/troisjs/tro…

6. 组件

（1）Vue Grid Layout

vue-grid-layout 是一个网格布局系统，类似于 Gridster，用于 Vue.js。

Github： github.com/jbaysolutio…

（2）Vue Draggable

Vue Draggable 是一个基于 Sortable.js 的 Vue 拖拽组件。

Github： github.com/SortableJS/…

（3）Vue Tour

Vue Tour 是一个轻量级、简单且可定制的导览插件，可与 Vue.js 一起使用。它提供了一种快速简便的方法来指导用户完成你的应用程序。

Github： github.com/pulsardev/v…

（4）Swiper.js

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡。主要使用与移动端的网站、网页应用程序，以及原生的应用程序。

Github： github.com/nolimits4we…

（5）vue-easytable

该库提供了一个功能齐全且高度可定制的表格组件/数据网格。它支持许多功能，如虚拟滚动、列固定、标题固定、标题分组、过滤器、排序、单元格省略号、行扩展、行复选框等。

Github： github.com/Happy-Codin…

7. UI 组件

（1）Element Plus

Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，Element Plus 是基于 Vue3 面向设计师和开发者的组件库，提供了配套设计资源，帮助你的网站快速成型。

GitHub：github.com/ElemeFE/ele…

（2）Vuetify

Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。

GitHub：github.com/vuetifyjs/v…

（3）Vant

Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率，支持 Vue 3。

Github： github.com/youzan/vant

（4）Naive UI

Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库。

Github： github.com/TuSimple/na…

8. 动画

（1）Animate.css

animate.css 是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。

GitHub： github.com/animate-css…

（2）Greensock

GreenSock是一个JavaScript动画库，可轻松对HTML元素进行动画处理。用于创建高性能，零依赖性，跨浏览器动画，声称在超过 400 万个网站中使用。

Github： github.com/greensock/G…

（3）Popmotion

Popmotion 是一个只有12KB的 JavaScript 运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的DOM支持：CSS，SVG，SVG路径和DOM属性的支持，开箱即用。

Github： github.com/Popmotion/p…

（4）Vue Kinesis

Vue Kinesis 支持使用 Vue.js 轻松创建复杂的交互式动画，其支持 Vue 3。

Github： github.com/Aminerman/v…

9. 图标

（1）IconPark

IconPark 提供超过 2400 个高质量图标，还提供了每个图标的含义和来源的描述，便于开发者使用。除此之外，该网站还可以自定义图标，这是与其他图标网站与众不同的地方。该图标库是字节跳动旗下的技术驱动图标样式的开源图标库。

Github： github.com/bytedance/i…

（2）Font Awesome

Font Awesome 提供了可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Github： github.com/FortAwesome…

（3）Ionicons

Ionicons 是一个完全开源的图标集，是知名混合开发框架 Ionic Framework 内置的图标库，包含 1300 个设计优雅、风格统一的高质量图标，能满足大多数的业务场景。

Github： github.com/ionic-team/…

（4）Bootstrap Icons

Bootstrap Icons 是 Bootstrap 开源的 SVG 图标库，此图标库起初专门针对其组件（从表单控件到导航）和文档进行定制设计和构建，现在可以免费用于任何项目。

Github： github.com/twbs/icons

10. 富文本编辑器

（1）Tiptap

Tiptap 是一个基于 Vue 的无渲染的富文本编辑器，它基于 Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。使用无渲染组件（函数式组件），几乎完全控制标记和样式。菜单的外观或在DOM中的显示位置。这完全取决于使用者。

GitHub： github.com/ueberdosis/…

（2）Quill.js

Quill.js 是一个具有跨平台和跨浏览器支持的富文本编辑器。凭借其可扩展架构和富有表现力的 API，可以完全自定义它以满足个性化的需求。

GitHub： github.com/quilljs/qui…

（3）TinyMCE

TinyMCE 是一个热门的富文本编辑器。它的目标是帮助其他开发人员构建精美的 Web 内容解决方案。它易于集成，可以部署在基于云的、自托管或混合环境中。该设置使得合并诸如 Angular、React 和 Vue 等框架成为可能。它还可以使用 50 多个插件进行扩展，每个插件都有 100 多个自定义选项。

GitHub： github.com/tinymce/tin…

（4）CKEditor 5

CKEditor 是一个强大的富文本编辑器框架，具有模块化架构、现代集成和协作编辑等功能。它可以通过基于插件的架构进行扩展，从而可以将必要的内容处理功能引入。它是在 ES6 中从头开始编写的，并且具有出色的 webpack支持。可以使用与Angular、React和Vue.js的原生集成。

GitHub： github.com/ckeditor/ck…

11. 服务端渲染

（1）Nuxt.js

Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。它预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

Github： github.com/nuxt/nuxt.j…

（2）SSR

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。面向 Serverless，同时支持 React，Vue2，Vue3。

Github： github.com/zhangyuang/…

（3）Vue-meta

Vue-meta 是 Vue.js 的一个插件，它可以帮助你使用 SSR 支持管理 Vue.js 组件中的 HTML 元数据。Vue-meta 使用 Vue 的内置响应性使管理应用程序的元数据变得简单。

Github： vue-meta.nuxtjs.org/

12. 数据获取

（1）Axios

Axios 是一个基于promise 的网络请求库，作用于node.js和浏览器中。

Github： github.com/axios/axios

（2）vue-axios

vue-axios 是一个将 axios 集成到 Vuejs 的小型库。

Github： github.com/imcvampire/…

13. 构建工具

（1）Vite

Vite 是下一代前端开发与构建工具。 Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

Github： github.com/vitejs/vite

（2）Webpack

webpack 是一个用于现代JavaScript应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

Github： github.com/webpack/web…

Element Plus

官方网站：element-plus.gitee.io/zh-CN

饿了么团队基于 Vue 3.0 更新发布的优秀开源桌面 UI 组件库，这是 Element UI 的升级版本，体验同样优秀，api更加友好，文档同样详尽，很香，我开发管理后台的主要 UI 框架，移动端涉及到表格就会用上它。

Element Plus

Element – 饿了么团队出品的神级桌面 UI 组件库，它诞生于 2016 年，起初是饿了么内部的业务组件库，主要用于快速开发中后台管理产品。在开源后深受广大前端开发者的喜爱， 4 年多的时间，Element 在 GitHub 上已经获得 52.6k 的 star，14.2k 的 fork，NPM 下载量高达 106 万次/月。已经成为 Vue 生态中最流行的 UI 组件库之一。

TDesign Vue Next

官方网站：tdesign.tencent.com/mobile-vue/…

TDesign Vue-Next For Mobile 旨在满足 H5 场景下的前端页面开发需求，同时，产品保持了与 TDesign 小程序端高度一致的设计语言和 API，统一的 API 不仅在开发上能让开发者在多端开发中更加适应，也可以通过 API 自动生成单元测试用例。

TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。

TDesign 具有统一的价值观，一致的设计语言和视觉风格，帮助用户形成连续、统一的体验认知。在此基础上，TDesign 提供了开箱即用的 UI 组件库、设计指南和相关设计资产，以优雅高效的方式将设计和研发从重复劳动中解放出来，同时方便大家在 TDesign 的基础上扩展，更好的的贴近业务需求。

NutUI-JDT 3.0

官方网站：nutui.jd.com/jdt/#/

京东出品的轻量免费开源 Vue 组件库迎来了全新版本更新，NutUI-JDT 是京东样式风格的 Vue 移动端组件库，开发和服务于移动 Web 界面的企业级产品。

京东出品的 Vue 移动端 UI 组件库 NutUI-JDT 最近迎来了大版本更新，还特意做了全新的官网，主色调从原来的蓝色变成了绿，这也意味着，京东科技涌现，新设计，科技感很拉满。

ArcoDesign

官方网站：www.thosefree.com/arco-design

字节跳动团队最新开源的企业级产品设计系统，包含一套 Vue3/React UI 组件库，在刚结束的2021稀土开发者大会上，头条和抖音的母公司字节跳动开源了ArcoDesign / SemiDesign 两款 UI 组件库，本文主要介绍 ArcoDesign。

ArcoDesign

ArcoDesign 基于字节跳动公司内部的 Byte Design 升级而来，在打磨了近 3 年之后，通过字节内部大量业务沉淀和验证，在前两天由掘金举办的《稀土开发者大会2021》上开源了，这不仅仅是一款 UI 组件库，而是一个能力全面的企业级产品设计系统。

Wave UI

官方网站：antoniandre.github.io/wave-ui/

WaveUI 在Vue3 发布后进行了良好的定位，WaveUI 的开发是在 Vue3 仍处于alpha阶段时就开始了，其目标是在其API稳定后立即支持它，使其成为首批 Vue3 UI框架之一。

WaveUI 拥有40多个漂亮且响应迅速的组件，它们的范围从旋转器到日历，以及介于两者之间的任何东西。WaveUI 还提供实用程序、可定制性和成熟的集成表单验证功能。

WaveUI 提供的组件非常漂亮，动画效果也非常好，它的风格在整个框架中是一致的。企业级响应式 Vue3 应用程序不错的选择。

Ionic

官方网站： ionicframework.com/docs/vue/ov…

Ionic 是最早提供 Vue3 支持的 UI 框架之一， Ionic 更倾向于移动 UI，团队知道如何迎合和维护一个优秀的 UI 框架。

Ionic Vue 是一个很成熟的框架，有一个令人震惊的社区、大量的 StackOverflow 问题、企业支持和一个拥有核心成员的大型 Slack 频道，这使得可以在需要帮助时轻松获得支持。

Ionic Vue 框架在 Github上有 45k+ 颗星，已经被很多大公司使用，包括空客（Airbus）和艺电（Electronic Arts），而 Ionic 的团队以擅长维护他们的UI框架而闻名，这是现在和未来的一个很好的选择。

NutUI

官方网站：nutui.jd.com/#/

京东出品的轻量免费开源 Vue 组件库迎来了全新版本更新，NutUI 是京东样式风格的 Vue 移动端组件库，开发和服务于移动 Web 界面的企业级产品。

京东出品的 Vue 移动端 UI 组件库 NutUI 最近迎来了大版本更新，还特意做了全新的官网，主色调从原来的蓝色变成了红色，这也意味着，不仅升级到了如今火热的 Vue 3.x，整套 UI 视觉也进行了全新设计，看着更接近京东 App。

BalmUI

官方网站：next-material.balmjs.com/#/

BalmUI 已经发布了他们的 9.0 版本了，该版本支持Vue3。Balm 基于谷歌的 Material Design，这就是为什么它看起来很熟悉。Balm 附带 Vue 插件和指令，以及从简单到复杂的高度可定制的组件。

BalmUI

BalmUI 是一款由 Balm.js （一款类似 Vue CLI 的前端工作流工具）团队打造前端 UI 组件库，基于最新的 Vue 3 构建，开箱即用，定制化强，设计风格完全遵循谷歌的 Material Design 设计规范，是一款交互体验非常优秀的 UI 组件库。

Vuestic

官方网站：vuestic.dev

Vuestic 是 Vue 最漂亮的开源管理面板之一，擅长编写可维护的 Vue 代码，制作灵活的组件和接口。

Vuestic

该团队最近发布了 Vuestic 的 Vue3版本，包含了流行的 Vuestic Admin UI 和更多的组件。Vuestic 强调它对键盘导航的开箱即用支持，由于它提供的用户体验，这个特性在前端社区很受欢迎。

Varlet UI

官方网站：varlet.gitee.io/varlet-ui/#…

基于 Vue3 的免费开源 Material 风格移动端 UI 组件库，被尤雨溪/阮一峰等大神推荐，值得关注。

Varlet UI

Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区团队维护。支持 Typescript、按需引入、暗黑模式、主题定制、国际化，并提供 VSCode 插件保障良好的开发体验

Naive UI

官方网站：www.naiveui.com/zh-CN/os-th…

Naive UI 在 Twitter 上发布，然后被 Vue 的创建者转发，给这个新生的组件库带来了大量流量。现在，Naive UI 在不到三个月的时间里就在 GitHub 上获得了10k 颗星。

它提供了70多个制作精良的组件，这些组件可以无缝地融入几乎任何类型的 Vue3应用。Naive的组件性能优异，可定制性极强，并支持 TypeScript，提供了很棒的开发体验。

Quasar

官方网站：next.quasar.dev/

Quasar 是一个完整的、以性能为中心的框架，可帮助构建 Vue 用户界面（SPA、PWA、SSR、移动和桌面），除了 Vue、Node 和 Webpack，Quasar 还包含 Cordova、Capacitor 和 Electron，它们可以帮助构建桌面和移动体验，而无需单独学习。

Quasar 框架似乎是基于 Material Design，但是一旦开始，一切都可以很好地定制以适应自己的设计体系。

对 Vue3 支持也很迅速，而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外，他们还发布了可组合组件，帮助开发人员更深入地了解 Quasar API。

PrimeVUE

官方网站：primefaces.org/primevue/sh…

PrimeVUE 也算是最早支持 Vue3 的框架之一，它并没有让人失望。PrimeVUE 拥有 80 多个组件，证明自己是此列表中组件范围最广的框架之一。

组件包括带有仪表、滑块、树、图形、拆分按钮、旋钮、图表等的密码表单。PrimeVUE 甚至还集成了一个表单验证库 Vuelidate。附带了预先制作的主题，并提供了一个成熟的可视化编辑器，帮助开发人员定制自己的主题。

Ant Design Vue

官方网站：www.antdv.com/components/…

Ant Design Vue 是一个非常成熟的框架，使用 Ant Design Vue 创建用户界面非常简单，这些组件可以适应各种图标样式、字体和黑色主题。Ant Design Vue 不断改进其60多个组件，基本覆盖项目大部份需求，而且使它们变得更好，更易于访问。

Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。

Ant Design Vue 在 GitHub 上拥有 15k+ 颗星，每周下载量为 49k，数据已经说明了它的受欢迎程度。

Vant UI

官方网站：vant-contrib.gitee.io/vant/#/zh-C…

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。

个人强力推荐，公司移动端开发使用这个作为移动端公共框架开发，用起来很香

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

Mzl UI

官方网站：mzlui.codeym.com/#/

Mzl UI 是一个轻量、可靠、完美的支持Vue3的组件库

Mzl UI 组件库是基于MIT开源在GitHub上的一款全新的支持vue3.2+vite的组件库，是我们共同爱好者一起开发维护的组件库。目前已完成了79个版本的更新，已完成30+基础组件的开发，提供190+常用图标选择。github贡献者达到了9+人员的参与，star次数超过65+。

这是我加入的团队，虽然没上面的这么优秀，但相信未来会越来越好。

一直在进步，重要的我们不是要让多少人来用我们的组件，而是通过自己动手来实现，增加自己的技术功底和封装思想，我们在学习中探索、在探索中成长，为了成为更好的自己。如果有兴趣想加入团队的话，扣合作贡献请私信或者邮件：1046674804@qq.com，让我们积极参与贡献吧。

未来我们将持续优化组件库的性能。提供更多的优质组件。也将计划开发基于react18+vite的组件库。届时欢迎各路大神积极参与贡献，共同完成属于我们自己的组件库。

Github：github.com/Ningstyle/m…

vue-drag-resize

Vue-drag-resize (kirillmurashov.com)

vrp-vue-resizable

Vue App (nikitasnv.github.io)

Sweet Modal

Modals是一个很好的方法，可以为你的Web应用程序的用户体验添加一些不同的东西。Sweet Modal为你提供了许多伟大的模态选择，许多Modal肯定会使你的Web应用与众不同。它们可以用于通过表单收集数据或只是传递警报，每个项目都需要一个漂亮的Modal。在GitHub上有超过500颗星，这绝对是一个值得关注的项目。

GitHub: github.com/adeptoas/sw…