Vue UI 组件库

简介: 随着SPA、前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本。

随着SPA、前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本。vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀UI组件库供大家参考,期待开发者们推出更多优秀的组件库


PC

Element


star:11.2k
demo: http://element.eleme.io/#/zh-CN/component/layout
docs: http://element.eleme.io/#/zh-CN
github: https://github.com/ElemeFE/element
视频教程: https://www.codecasts.com/series/use-element-ui-tool-kit

iView


star:5.6k
demo: https://www.iviewui.com/overview
docs: https://www.iviewui.com/
github: https://github.com/iview/iview

VueStrap


star:3.7k
demo: http://yuche.github.io/vue-strap/
docs: http://yuche.github.io/vue-strap/
github: https://github.com/yuche/vue-strap

Vue Admin


star:3.8k
demo: https://admin.vuebulma.com/#/components
docs: https://admin.vuebulma.com/#/
github: https://github.com/vue-bulma/vue-admin

Keen UI


star:2.5k
demo: https://josephuspaye.github.io/Keen-UI/#
docs: https://josephuspaye.github.io/Keen-UI/#
github: https://github.com/JosephusPaye/Keen-UI

Vue MDL


star:890
demo: http://posva.net/vue-mdl/
docs: http://posva.net/vue-mdl/
github: https://github.com/posva/vue-mdl

BootstrapVue


star:783
demo: https://bootstrap-vue.github.io/
docs: https://bootstrap-vue.github.io/docs
github: https://github.com/bootstrap-vue/bootstrap-vue/

Vue-Blu


star:680
demo: https://chenz24.github.io/vue-blu/#/
docs: https://chenz24.github.io/vue-blu/#/
github: https://github.com/chenz24/vue-blu

Vuikit


star:646
demo: https://vuikit.js.org/#/
docs: https://vuikit.js.org/#/
github: https://github.com/vuikit/vuikit

Mobile

Vux


star:7.4k
demo: https://vux.li/demos/v2/#/
docs: https://vux.li/#/
github: https://github.com/airyland/vux

Mint UI


star:5.4k
demo: http://elemefe.github.io/mint-ui/#/
docs: http://mint-ui.github.io/#!/zh-cn
github: https://github.com/ElemeFE/mint-ui

Vonic


star:1.6k
demo: https://wangdahoo.github.io/vonic/docs/#/
docs: https://wangdahoo.github.io/vonic-documents/#/
github: https://github.com/wangdahoo/vonic

Vum


star:816
demo: http://demo.getvum.com/#!/
docs: http://getvum.com/
github: https://github.com/vum-team/vum

Vue-Carbon


star:632
demo: https://myronliu347.github.io/vue-carbon/#!/
docs: https://myronliu347.github.io/vue-carbon/book/v0.5.0/
github: https://github.com/myronliu347/vue-carbon

YDUI


star:127
demo: http://vue.ydui.org/
docs: http://vue.ydui.org/docs/#/
github: https://github.com/ydcss/vue-ydui

Vuwe


star:122
demo: https://vuwe.github.io/vuwe/#/
docs: https://vuwe.github.io/vuwe/doc.html#/
github: https://github.com/vuwe/vuwe

WE-VUE


star:37
demo: http://wevue.org/
github: https://github.com/tianyong90/we-vue

responsive layout system

Vue Material


star:2.7k
demo: https://vuematerial.github.io/#/
docs: https://vuematerial.github.io/#/getting-started
github: https://github.com/marcosmoura/vue-material

Muse-UI


star:2.5k
demo: http://www.muse-ui.org/#/install
docs: http://www.muse-ui.org/#/index
github: https://github.com/museui/muse-ui

Vuetify


star:2.1k
demo: https://vuetifyjs.com
docs: https://vuetifyjs.com
github: https://github.com/vuetifyjs/vuetify

Radon UI


star:669
demo: https://luojilab.github.io/radon-ui/#!/basic/button
docs: https://luojilab.github.io/radon-ui/#!/
github: https://github.com/luojilab/radon-ui

RUBIK


star:191
demo: https://ccforward.github.io/rubik/#/
docs: https://ccforward.github.io/rubik/#/
github: https://github.com/ccforward/rubik/

Hybrid

OnsenUI-Vue


star:4.6k
demo: https://tutorial.onsen.io/?framework=vue&category=reference&module=dialog
docs: https://onsen.io/v2/docs/guide/vue/
github: https://github.com/OnsenUI/OnsenUI/tree/master/bindings/vue

Quasar


star:1.8k
demo: http://quasar-framework.org/components/dialog.html
docs: http://quasar-framework.org/guide/index.html
github: https://github.com/quasarframework/quasar

Framework7-Vue


star:247
demo: http://framework7.cn/
docs: http://vue.framework7.cn/
github: https://github.com/nolimits4web/Framework7-Vue

相关文章
|
5天前
Vue3——基于tdesign封装一个通用的查询组件
Vue3——基于tdesign封装一个通用的查询组件
23 3
|
4天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
30 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
3天前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
4天前
|
JavaScript 容器
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
这篇文章通过代码示例和项目目录结构图,介绍了如何在Vue脚手架中使用组件来实现一个产品列表页。文章详细展示了组件的编写、引入、注册和使用步骤,并提供了实际效果截图。同时,文章还友情提示读者需要使用Vue脚手架来完成这些操作。
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
|
4天前
|
JavaScript 程序员
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
这篇文章通过代码示例和效果图,详细阐述了Vue中组件的嵌套使用,包括创建组件、组件间的嵌套、注册组件以及实现的效果。同时,文章还介绍了VueComponent的相关知识,包括组件实例对象和Vue实例对象的区别。
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
|
4天前
|
JavaScript 容器
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
这篇文章讲解了Vue中组件的基本使用方法,包括组件的定义、注册和使用过程,并通过代码实例演示了非单文件组件的创建和使用,同时指出了一些使用组件时的注意事项。
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
|
4天前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
14 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
4天前
|
数据可视化 数据挖掘 持续交付
Axure Web端元件库:从Quick UI到500+组件的飞跃
在快速变化的数字世界中,产品设计不仅仅是功能的堆砌,更是用户体验的精心雕琢。原型设计作为产品开发过程中的关键环节,其重要性不言而喻。Axure,作为业界领先的原型设计工具,凭借其强大的交互设计和丰富的功能,赢得了全球设计师和开发者的信赖。而Axure Web端元件库,则是这一平台上的一颗璀璨明珠,它以超过500个精心设计的组件为基础,为设计师们打开了一扇通往高效、高质量原型设计的大门。
15 0
|
4天前
|
JavaScript 前端开发
在Vue3+ElementPlus项目中实现一个简单的新增/移除行记录的小组件
在Vue 3和Element Plus项目中创建一个支持新增和移除行记录的简单表格组件。
23 0
|
4天前
|
数据采集 JavaScript
Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
这篇文章介绍了Vue中组件化编码的实现和组件间参数传递的方法,通过实战练习展示了从App.vue向TheList.vue和TheItem.vue传递数据的流程和代码示例。