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

「爱情、让人受尽委屈。」 2024-02-20 09:09 35阅读 0赞

### 一、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/

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 14个你需要知道的实用CSS技巧

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

相关学习 Vue 你需要知道的 webpack 知识（一）

相关 5个你必须知道的Docker实用工具

相关 35 个你也许不知道的 Google 开源项目

相关你需要知道的12个Git高级命令

相关 15个你必须知道的Facebook开源项目

相关 9 个你应该知道的支付系统开源项目

相关 Vue引入vuetify框架你需要知道的几点

相关你需要知道的30个CSS知识点