[收藏]VUE优秀UI组件库合集
[收藏]VUE优秀UI组件库合集(来源于https://shimo.im/doc/LkpdnWxM1j40BDJj/)
前言：vue作为一款深受广大群众以及尤大崇拜者的喜欢，特此列出在github上开源的vue优秀的UI组件库供大家参考，期待开发者们推出更多优秀的组件库。
一、相关框架介绍
--------------------PC------------------------
Element
网站快速成型工具，Element,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库（来自于饿了吗UED）；
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
iView
关于iView,iView是一套基于Vue.js的开源UI组件库，主要服务于PC界面的中后台产品。
特性：高质量、功能丰富，友好的API、自由灵活地使用空间，细致、漂亮的UI，事无巨细的文档，可自定义主题。
谁在使用：TalkingData、阿里巴巴、腾讯、京东、滴滴出行、美团、新浪、联想。
star★：5.6k
demo：https://www.iviewui.com/overview
docs：https://www.iviewui.com/
github：https://github.com/iview/iview
VueStrap
Vuetrap就是bootstrap的vue版本。
vue-element-admin 后台基础篇（segmentfault）:https://segmentfault.com/a/1190000009275424
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
一个凑合的Vue.js移动孤单UI组件库
关于VUX--https://doc.vux.li/zh-CN/
star★：7.4k
demo：https://vux.li/demos/v2/#/
docs：https://vux.li/#/
github：https://github.com/airyland/vux
Mint UI
基于Vue.js的移动端组件库 http://mint-ui.github.io/#!/zh-cn
特性介绍：
Mint UI包含丰富的CSS和JS组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率
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
Vonic---https://wangdahoo.github.io/vonic/docs/#/
star★：1.6k
demo：https://wangdahoo.github.io/vonic/docs/#/
docs：https://wangdahoo.github.io/vonic-documents/#/
github：https://github.com/wangdahoo/vonic
VUM
VUM--http://demo.getvum.com/#/
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
YDUI 一只注重审美，且性能高效的移动端&微信UI--http://www.ydui.org/
专属于移动；采用Flex布局；用rem来做响应式开发；高端定制。
star★：127
demo：http://vue.ydui.org/
docs：http://vue.ydui.org/docs/#/
github：https://github.com/ydcss/vue-ydui
Vuwe
Vuwe是一款基于微信WeUI所开发的，专用于Vue2的组件库；
它于WeUI完全解耦，用户通过自定义WeUI的样式文件，可以方便地对VUWE实现定制化。
github：https://github.com/vuwe/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
简单易用的Vue.js组件。地址--https://wevue.org/
简单易用；文档完善；在线示例。
简单易用：we-vue组件使用简单，配置很容易。支持多种引入方式。对于对vue有一定了解的开发者，一定能很快上手。
star★：37
demo：http://wevue.org/
github：https://github.com/tianyong90/we-vue
--------------------responsive layout system------------------------
Vue Material
通过Vue Material和Vue 2.0建立精美的app应用--http://vuematerial.materializecss.cn/#/
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
基于Vue 2.0优雅的Material Design UI组件库--https://muse-ui.org/#/
组件丰富：Muse UI拥有40多个UI组件，用于适应不同业务环境；可定制：Muse UI自定义主题方式极为优雅，仅需少量代码即可完成主题样式替换；基于Vue 2.0：Muse UI基于Vue 2.0开发，Vue 2.0是当下最快的前端框架之一，小巧，api友好，可用于开发的复杂单页应用。
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
Material Design Component Framework--https://vuetifyjs.com/zh-Hans/
充满活力的社区；语义化的Material组件；开箱即用的项目脚手架。
你需要的工具应有尽有构建令人难以置信的用户界面：
社区聊天支持；80+Material Design组件；动态主题；可单个导入；支持SSR和PWA；过渡组件；8个vue-cli模板；快速构建。
star★：2.1k
demo：https://vuetifyjs.com
docs：https://vuetifyjs.com
github：https://github.com/vuetifyjs/vuetify
Radon UI
一个帮助你快速开发产品的VUE组件库，简介好用，效率高，让你摆脱各种定制化的烦恼。--https://luojilab.github.io/radon-ui/#!/
特性：
基于Vue开发的高质量UI组件；基于NPM+webpack+ES6+postcss开发；数据驱动，简单易使用。
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
关于Rubik UI--https://ccforward.github.io/rubik/#/
Rubik UI是一个基于Vue.js 2.0+的开源UI组件库，在交互和视觉设计上遵循Material Design规范，适用于PC端和mobile端。部分内部系统和一些小应用已经开始使用，开源版本还在开发完善中。
star★：191
demo：https://ccforward.github.io/rubik/#/
docs：https://ccforward.github.io/rubik/#/
github：https://github.com/ccforward/rubik/
--------------------Hybrid------------------------
OnsenUI-Vue
OnsenUI跨平台HTML5移动应用框架--https://onsen.io/v2/guide/vue/
OnsenUI是一个跨平台的HTML5移动应用框架，可帮助Javascript为Android和iOS创建漂亮的混合和移动Web应用。
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
Quasar--https://quasar-framework.org/
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
完美的HTML框架，构建精美的iOS&Android应用--http://framework7.cn/
Framework7是一个开源免费的框架，可以用来开发混合移动应用（原生和HTML混合）或者开发iOS&Android风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。
Framework7最主要的功能是可以使用HTML、CSS、和JS来开发iOS7应用。Framework7是完全免费开源的。
Framework7并不能兼容所有的设备。她只专注于为iOS何Google Material设计提供最好的体验。
如果你想开发iOS或者Android混合应用（Phonegap）或者你想开发iOS和Google Material风格的WEB APP，那么Framework7将会是你的首选。
①简单易用；②完美兼容iOS主题；③完美兼容Google Material主题；③UI组件；④杀手锏特性--滑动返回；⑤自定义；⑥内置变现渠道；⑦更多特色--原生滚动条，不依赖第三方库，高性能的动画，XHR+Caching+History+Preloading,多个视图（分屏），简洁的JS API，页面动画，Dom7-自定义的DOM库。
star★：247
demo：http://framework7.cn/
docs：http://vue.framework7.cn/
github：https://github.com/nolimits4web/Framework7-Vue
补充于：2018/09/19
（今天，在《前端开发》又看到了VUE的开源项目，有些vue库，未整理，再此添加进去，重复部分请忽略。参考链接：https://my.oschina.net/u/3018050/blog/2049912）
二、补充新的ui库和小项目
（1）前台UI组件库
1、Element
传送门：https://www.oschina.net/p/element-ui
优点：中文文档，ui种类比较全，ui设计简洁清晰；
缺点：不够有特点。
2、iView
传送门：https://www.oschina.net/p/iview
优点：和element的UI很相似，有一些多的补充，可以相互替换；
缺点：仍然没有什么特色。
3、Vuetify
传送门：https://www.oschina.net/p/vuetify
优点：时间选择器是时钟样式，比较有特色。中文文档
缺点：种类不如前面全。
4、Vue-material
传送门：https://www.oschina.net/p/vue-material
优点：日期选择器配色舒适，进度条样式有虚线形式，步骤条更清晰相比有创新。表单字段点击后文字会上浮。
5、Quasar
传送门：https://www.oschina.net/p/quasar-framework
构建响应式网站，PWA，混合移动应用程序，打不开，无法评论，只有项目。
6、Buefy
传送门：https://www.oschina.net/p/buefy
优点：时间选择器数字很大有特点；
缺点：非中文文档。
7、Vant
传送门：https://www.oschina.net/p/vant
优点：移动端界面，轻量化，基本涵盖移动端交互的ui，和微信样式很像。
8、At-ui
传送门：https://github.com/AT-UI/at-ui
一款全新的平面UI套件，专门用于桌面应用程序，
优点：颜色比较素雅，UI比较秀气。
9、Vue-js-modal
传送门：https://github.com/euvl/vue-js-modal
关于模态框的ui库，配色和阴影上适合音乐娱乐类项目。
10、Vuex-loading
传送门：https://github.com/f/vuex-loading
等待相关进度的一些库，
缺点：并不是那么好看，使用的话，最好手动调整一下样式。
11、Vue-js-grid
传送门：https://github.com/euvl/vue-js-grid
可移动方格子位置的库。
12、Dockeron
docker上的ui库
13、mint-ui
传送门：https://www.oschina.net/p/Mint-UI
优点：风格简洁，文档中移动端看的效果清晰；
缺点：中文字体和间距比例上稍稍偏大。
14、Keen-UI
传送门：https://www.oschina.net/p/keen-ui
优点：移动端框架，日期选择器比较好看；
缺点：非中文文档。
15、VueCircleMenu
传送门：https://github.com/OYsun/VueCircleMenu
优点：提供各种从中间蹦跶出半圆形按钮的组件方案，主流ui库给的比较少，有了它可以不用自己写了；
缺点：配色视图有点惨。
16、vue-carbon
传送门：https://www.oschina.net/p/vue-carbon
优点：很淡雅的风格，虽然颜色只有一种，但是字体和间距给的很好，一眼过去很舒服，ui相比要做的事情不会喧宾夺主；
缺点：在中国可能不是主流。
17、vue-calendar
传送门：https://github.com/jinzhe/vue-calendar
特别中国特色，排版稍稍优点拥挤，但是有农历，好评！
18、vue-datetime-picker
传送门：https://github.com/Haixing-Hu/vue-datetime-picker
19、vue2-calendar
传送门：https://github.com/icai/vue2-calendar
优点：日期选择器中支持自定义事件的稀缺，支持lunar和日期事件的日期选择器。
20、vue-datepicker
传送门：https://github.com/hilongjw/vue-datepicker
日期选择简洁大气，希望可以有匹配的时间选择器。
21、vue-datepicker
传送门：https://github.com/weifeiyue/vue-datepicker
优点：很小巧，没有多余的装饰，不占版面。
22、vue-date-picker
传送门：https://github.com/Bubblings/vue-date-picker
VueJS日期选择器组件
23、vue-fullcalendar
大格子化日期选择器，酒店入住等游玩类网站会用到。
24、vue-datepicker-simple
传送门：https://github.com/dai-siki/vue-datepicker-simple
月份选择排版蛮特别，极少数用这么正红配色的日期选择器，基于vue的日期选择。
25、vue-chartjs
传送门：https://github.com/apertureless/vue-chartjs
可视化图表的vue版本，主要饼形图，条形图，雷达图等都有。
缺点：样式太简，使用还需调整，相比百度的Echart还是少太多图类。
26、DataVisualization
传送门：https://github.com/SimonZhangITer/DataVisualization
提供四个简单的图类，比较实用。
缺点：配色上背景太花，前景色饱和度太低，需要调整。
27、vue-charts
传送门：https://github.com/hchstera/vue-charts
样式比较好看，但目前图标类型还是太少。
28、vue-chartkick
传送门：https://github.com/ankane/vue-chartkick
vueJS一行代码实现优美图表。
29、vue-quill-editor
传送门：https://github.com/surmon-china/vue-quill-editor
不似很多富文本编辑器好几行的功能，但是排版简洁清晰，主要功能都有，样式比较好看。
基于Quill适用于Vue2的富文本编辑器
30、Vueditor
传送门：https://github.com/hifarer/Vueditor
优点：排版简洁，所见所得。
31、vue-html5-editor
传送门：https://github.com/PeakTai/vue-html5-editor
小巧实用，可适合移动办公。
32、vue-simplemde
传送门：https://github.com/F-loat/vue-simplemde
优点：高亮代码的富文本编辑器，配色舒适，间距好。
VueJS的Markdown编辑器组件
33、vuwe
传送门：https://github.com/vuwe/vuwe
优点：样式上和微信很像；
缺点：直接使用，没有说明，文档不好用。
基于微信WeUI所开发的专用于Vue2的组件库。
34、cubeex
传送门：https://github.com/fangyongbao/cubeex
上下间距比较大，对不是特别高分辨率的旧版本视觉感受比较友好；包含一套完整的移动UI。
35、vue-region-picker
传送门：https://github.com/QingWei-Li/vue-region-picker
优点：不用自己再找数据调配省市区；
缺点：样式极简，除了老版式银行金融类网站外，基本没有直接这么样式使用的，需要调样式；
选择中国的省份市和地区
36、vue-awesome-swiper
传送门：https://github.com/surmon-china/vue-awesome-swiper
多种显示的轮播图组件
37、vue-slick
传送门：https://github.com/staskjs/vue-slick
轮播图组件ui
38、vue-material-design
传送门：https://github.com/loujiayu/vue-material-design
表单类ui，简洁
39、Muse-UI
传送门：https://www.oschina.net/p/muse-ui
优点：非常好看的时间、日期选择器！官网页面特别有爱的设计，相信其他组件随着时间也会不断完善。
40、Uiv
传送门：https://github.com/wxsms/uiv
用于Vue2的Bootstrap3组件库。
41、Vuikit
42、Fish-UI
传送门：https://www.oschina.net/p/fish-ui-
灰白配色的ui库，干净利落，偏向欧美表单风格；
灰色的色度，线条粗细，文字字体选择，间距给人的感觉自在。
43、Framework7 Vue
传送门：https://framework7.io/vue/
优点：目前发现的唯一对安卓和苹果上，ui的不同效果做出的效果图说明的UI库。从按钮到轮播图非常全面。
44、Cube UI
传送门：https://www.oschina.net/p/cube-ui
很有特色的ui设计，类型比较全，活动效果比较好。
45、Vueblu
传送门：https://github.com/chenz24/vue-blu
比较简洁，各种角度的提供了过渡动画。
46、Ant Design Vue
传送门：https://github.com/okoala/vue-antd
非常扁平化的ui，没有阴影，没有线框，纯色填充。
二、后台UI库
1、Vue-element-admin
传送门：https://www.oschina.net/p/vue-element-admin
非常全面的后台UI库，设计非常适合商业应用。
2、Vue-admin
传送门：https://github.com/vue-bulma/vue-admin
图表图形的设计虽说不是那么惊艳，但是粗细和配色非常会突出重点。
3、vueAdmin
传送门：https://github.com/taylorchen709/vueAdmin
优点：全面，适合中国的主流群体设计；
缺点：不对年轻人风格，非常常规的后台设计。
三、其他
1、Best-resume-ever
传送门：https://github.com/salomonelli/best-resume-ever
2、vue-hackernews-2.0
传送门：https://github.com/vuejs/vue-hackernews-2.0
vue-router&vuex和服务器端渲染。
3、Vue-devtools
传送门：https://github.com/vuejs/vue-devtools
用于调试Vue.js应用程序的Chrome devtools扩展程序。
4、Electron-vue
传送门：
https://github.com/SimulatedGREG/electron-vue
https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
Electron & Vue.js快速启动样板，包括vue-cli脚手架，通用Vue插件，electron-packager/electron-builder,单元/e2e测试，vue-devtools和webpack。
5、Vue-loader
传送门：https://github.com/vuejs/vue-loader
Vue.js组件的Webpack加载程序（loader）。
6、Vuepack
传送门：https://github.com/egoist/vuepack
一个使用Vue 2,Vuex,Vue-router和Webpack 2（甚至是Electron）的新潮种子项目。
7、Codesandbox
传送门：https://github.com/CompuIves/codesandbox-client
专为Web应用程序开发而设计的在线代码编辑器。
8、Vuefire(v 2.0)
传送门：https://github.com/vuejs/vuefire
Firebase 2 & > = 3的Vue.js 1 & 2绑定。
9、Vue-tetris
传送门：https://github.com/Binaryify/vue-tetris
使用Vue,Vuex,Immutable做的俄罗斯方块。
10、Vue-recyclerview
传送门：https://www.oschina.net/p/vue-recyclerview
使用vue-recyclerview掌握大型列表。
11、Vuex-persistedstate(v 2.0)
传送门：https://github.com/robinvdvleuten/vuex-persistedstate
用本地存储保持Vuex状态
12、Vue-test-utils
传送门：https://github.com/vuejs/vue-test-utils
用于测试Vue组件的使用程序。
13、Vue-meta(v 1.0)
传送门：https://github.com/vuejs/vue-test-utils
管理Vue 2.0组件中的页面元信息，支持SSR +流媒体。
14、ESLint-plugin-vue
传送门：https://github.com/vuejs/eslint-plugin-vue
官方ESLint的Vue.js插件。
15、Vue-tables-2
传送门：https://github.com/matfish2/vue-tables-2
Vue.js 2网格组件。
16、Vue-baidu-map
传送门：https://github.com/Dafrok/vue-baidu-map
优点：功能简单使用；
缺点：样式不好看。
17、vue-amap
传送门：https://www.oschina.net/p/vue-amap
基于Vue 2.x与高德的地图组件
18、vue-waterfall
传送门：https://www.oschina.net/p/vue-waterfall
Vue.js的瀑布布局组件。
四、一些项目
1、IFmiss/vue-music
传送门：http://www.daiwei.org/vue-music.html#/mymusic
2、仿豆瓣项目
传送门：https://github.com/jeneser/douban
好看的markdown编辑器
参考博客：https://shimo.im/doc/LkpdnWxM1j40BDJj/ 点击打开链接
版权声明：本文为博主原创文章，未经博主允许不得转载。
[收藏]VUE优秀UI组件库合集相关推荐
- [转]VUE优秀UI组件库合集
原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
- api 微信小程序组件库colorui_2020最全微信小程序UI组件库合集
概述 " 这可能是2020年最全的UI组件集合了,希望对你有帮助,如果觉得好,别忘了给小编给点点赞鼓励! 微信小程序实用UI组件库合集 第一款 官方WeUI组件库 " 地址: ht ...
- VUE优秀UI组件库（PC和Mobile）
引用: https://my.oschina.net/u/3219445/blog/1573155 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理 ...
- B端后台Dashboard页面 数据可视化页面 常用图表组件库合集 sketch格式
数据是企业的上帝之眼,数据可视化就发挥了很大的作用.很多从事B端产品设计的小伙伴在日常工作中遇到数据可视化的场景比较多,除了大屏可视化场景外,还有后台Dashboard页和一些前台统计页. 后台的设计 ...
- 如何开发一个基于 Vue 的 ui 组件库
如何开发一个基于 Vue 的 ui 组件库 开发模式 预览 demo 在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码. 常见的解决方案是像开发一般项目一样使用 webpack-d ...
- vue相关UI组件库
vue相关UI组件库 以下是关于vue相关比较热门和实用的组件库,学习vue的童鞋至少要会下面1到2个,然后基本就都会用了,用法差异不大. element-ui (适用与pc端和后台系统界面开发) h ...
- Vue 开发 UI 组件库
Vue 开发 UI 组件库 前言 一.开发环境搭建 1.项目初始化 2.开发前准备 二.Vue 实现常用组件 1.button 组件 1.1 参数支持 1.2 事件支持 1.3 Button 组件 1 ...
- vue 常用ui组件库
vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn de ...
- 16款优秀的Vue UI组件库推荐
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
- vant引入组件报错_强烈推荐优秀的Vue UI组件库
在我们实际开发中常常因为项目周期短不得不引入一些UI框架来辅助开发 那常见的比较好的UI框架有那些呢(基于VUE) Element UI组件库 (pc端) Element,一套为开发者.设计师和产品经 ...
最新文章
- python 之三级菜单
- Codeforces 41D Pawn 简单dp
- mysql2008无法启动_SQL Server 2008突然无法正常启动
- 在centos 7 下安装图形界面
- poj 2886Who Gets the Most Candies?
- 程序员是向左走，还是向右走！
- linux重定向文件被修改后,Linux服务器修改.htaccess文件实现301重定向
- KafkaConsumer源码解析
- 【渝粤教育】 广东开放大学21秋期末考试法律文书10684k2
- MacOS六个常用的终端命令
- CSS去除链接虚线（兼容IE6、IE7)
- 滤波电路对服务器的影响,滤波电路到底有什么作用？
- 开发文档chm文件打不开
- 目标追踪小任务（基于SIFT，LK光流，ceres）
- 从DOS中装操作系统时要加载smartdrv命令
- 制作歌词录入系统php,如何制作歌词字幕 制作字幕的软件
- CodeForces - 1312E Array Shrinking
- 读取/保存/写入 图像文件的shape格式
- To B产品用研工作，到底在研究什么？
- Linux驱动：内核的中断机制之二--request_threaded_irq函数使用