学习Vue3你需要知道的47个实用开源组件

一、WebUI库

1.ElementUIPlus

一套为开发者、设计师和产品经理准备的基于Vue3.0的桌面端组件库
官网：https://element-plus.org/zh-CN/

2.AntDesignofVue

AntDesign的Vue实现，开发和服务于企业级后台产品
官网：https://www.antdv.com/docs/vue/introduce-cn

3.BalmUI

基于谷歌的MaterialDesign，附带Vue插件和指令，以及从简单到复杂的高度可定制组件
官网：https://next-material.balmjs.com/

4.NaiveUI

图森Vue3的组件库，文档完整，我项目中经常使用
官网：https://www.naiveui.com/zh-CN/os-theme

5.arco.design

字节跳动企业级产品设计系统，支持React和Vue双版本
官网：https://arco.design/

6,Quasar

轻松构建高性能和高质量的Vue.js3用户界面，好用，但没有中文文档
官网：https://quasar.dev/

7.iDUX

Vue3.x的UI组件库，完全使用TypeScript开发
官网：https://idux.site/

8.TDesign

腾讯业务团队在服务业务过程中沉淀的一套企业级设计体系
官网：https://tdesign.tencent.com/

9.PrimeVue

易于使用、多功能、高性能的VueUI组件库
官网：https://www.primefaces.org/primevue/

10.DevUI

华为基于Vue3和DevUI设计的UI组件
官网：https://vue-devui.github.io/

11.vuestic-ui

Vue3的免费和开源UI库,UI非常好看，并且有可用后台管理界面。
官网：https://vuestic.dev/

12.HeadlessUI

完全无样式、完全可访问的UI组件，旨在与TailwindCSS完美集成。
官网：https://headlessui.com/

13.ViewUIPlus

基于Vue.js3的企业级UI组件库和前端解决方案
官网：https://www.iviewui.com/

二、移动UI库

14.Vant

有赞轻量、可靠的移动端组件库
官网：https://vant-contrib.gitee.io/vant/#/zh-CN

15.NutUI

京东风格的轻量级移动端Vue组件库，非常适合移动端电商使用。
官网：https://nutui.jd.com/#/

16.Varlet

Material风格移动端组件库，文档非常齐全。
官网：https://varlet.gitee.io/varlet-ui/#/zh-CN/home

17.nutui-bingo

京东基于NutUI的抽奖组件库，助力营销活动和小游戏场景。
官网：https://nutui.jd.com/bingo/#/

三、相关工具

18.unplugin-vue-components

antfu按需组件自动导入，开箱即用地支持Vue2和Vue3，Tree-shakable，只注册你使用的组件，附有流行UI库的内置解析器。
官网：https://www.npmjs.com/package/unplugin-vue-components

19.vuex-persistedstate

在页面重新加载之间保持并重载您的Vuex状态
官网：https://github.com/robinvdvleuten/vuex-persistedstate

20.vuex-persist

支持Typescript的Vuex插件，它能够将应用程序的状态保存到持久存储中，例如Cookies或localStorage
官网：https://championswimmer.in/vuex-persist/

21.@vueuse/gesture

手势库，使应用程序具有交互性
官网：https://gesture.vueuse.org/

22.unplugin-auto-import

antfu自动导入Vite、Webpack、Rollup和esbuild的API。支持TypeScript。
官网：https://github.com/antfu/unplugin-auto-import

23.pinia-plugin-persistedstate

Pinia商店的可配置持久性
官网：https://github.com/prazdevs/pinia-plugin-persistedstate

24.vue-termui

一个基于Vue.js的终端UI框架，可让您轻松构建现代终端应用程序
官网：https://vue-termui.dev/

四、可视化

25.Pdfvuer

DF查看器，使用Mozilla的PDF.js，支持Vue2和Vue3
官网：https://arkokoley.github.io/pdfvuer/

26.vue3-marquee

无缝滚动组件
官网：https://vue3-marquee.vercel.app/

27.Vue-ECharts

百度ECharts的Vue.js组件。配置参考Echarts官方基于EChartsv5+开发，适用于Vue.js2/3。
官网：https://vue-echarts.dev/

28.iconpark

字节跳动出品，将一个SVG图标转化为多个主题，并生成React图标，Vue图标，svg图标
官网：https://iconpark.oceanengine.com/home

五、插件

29.vue-multiselect-next

Vue.js的通用选择/多选/标记组件
官网：https://vue-multiselect.js.org/

30.vue-print-nb

用于印刷、简单、快速、方便、轻便的指令包装器
官网：https://github.com/Power-kxLee/vue-print-nb

31.vue-i18n-next

Vue3的国际化插件
官网：https://vue-i18n.intlify.dev/

32.vue-cropper

简单的vue图片裁剪插件
官网：http://github.xyxiao.cn/vue-cropper/example/

33.VueGridLayout

Vue.js的网格布局系统
官网：https://jbaysolutions.github.io/

34.VueQrcodeReader

允许在不离开浏览器的情况下检测和解码二维码
官网：https://gruhn.github.io/vue-qrcode-reader/

35.MakeitCaptcha

基于Vue3+Vite+Canvas开发的滑块验证码，动态生成验证滑块，结合后端的二次校验，能有效的避免被抓取模拟验证

官网：https://admin.makeit.vip/components/captcha

36.vue3-clipboard

Vue3的clipboard.js
官网：https://github.com/soerenmartius/vue3-clipboard

37.vue.draggable

基于Sortable.js的Vue3拖放组件
官网：https://sortablejs.github.io/vue.draggable.next/#/simple

38.BetterScroll

解决移动端（已支持PC）各种滚动场景需求的插件。
官网：https://better-scroll.github.io/docs/zh-CN/

六、相关生态

39.Vue插件库

官网：https://www.vue365.cn/

40.Pinia

轻量级状态管理库，API设计更接近Vuex5的提案
官网：https://pinia.vuejs.org/

41.NuxtModules

官网：Nuxt发现我们的模块列表以增强您的Nuxt项目
https://modules.nuxtjs.org/

42.Nuxt3

轻量级应用框架,可用来创建服务端渲染(SSR)应用
官网：https://v3.nuxtjs.org/

43.vuepress

Vue驱动的静态网站生成器
官网：https://v2.vuepress.vuejs.org/zh/

44.VueUse

强大的Vue组合实用程序集合
官网：https://vueuse.org/

七、动画

45.vue-starport

带有动画的跨路由共享组件
官网：https://vue-starport.netlify.app/

46.@vueuse/motion

VueComposables让你的组件动起来
官网：https://motion.vueuse.org/

八、音视频

47.@vueuse/sound

用于播放音效的Vue组合
官网：https://sound.vueuse.org/