VUE优秀UI组件库合集
前言: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
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
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
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
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://blog.csdn.net/qq_26780317/article/details/80655353