VUE优秀UI组件库合集

7,644 阅读14分钟

前言:vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀的UI组件库供大家参考,期待开发者们推出更多优秀的组件库。

一、相关框架介绍

                                        --------------------PC------------------------

Element

网站快速成型工具,Element,一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库(来自于饿了吗UED);

star★:11.2k

demo:element.eleme.io/#/zh-CN/com…

docs:element.eleme.io/#/zh-CN

github:github.com/ElemeFE/ele…

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: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:github.com/yuche/vue-strap

Vue Admin

star★:3.8k

demo:admin.vuebulma.com/#/components

docs:admin.vuebulma.com/#/

github:github.com/vue-bulma/v…

Keen UI

star★:2.5k

demo:josephuspaye.github.io/Keen-UI/#

docs:josephuspaye.github.io/Keen-UI/#

github:github.com/JosephusPay…

 

Vue MDL

 

star★:890

demo:http://posva.net/vue-mdl/

docs:http://posva.net/vue-mdl/

github:github.com/posva/vue-m…

 

BootstrapVue

 

star★:783

demo:https://bootstrap-vue.github.io/

docs:https://bootstrap-vue.github.io/docs

github: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:github.com/chenz24/vue-blu

 

VuiKit

 

star★:646

demo:vuikit.js.org/#/

docs:vuikit.js.org/#/

github:github.com/vuikit/vuik…

 

                                             --------------------Mobile------------------------

 

VUX

一个凑合的Vue.js移动孤单UI组件库

关于VUX--https://doc.vux.li/zh-CN/

star★:7.4k

demo:vux.li/demos/v2/#/

docs:vux.li/#/

github:github.com/airyland/vu…

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:github.com/ElemeFE/mint-ui

Vonic

Vonic---https://wangdahoo.github.io/vonic/docs/#/

star★:1.6k

demo:wangdahoo.github.io/vonic/docs/…

docs:wangdahoo.github.io/vonic-docum…

github:github.com/wangdahoo/v…

VUM

VUM--http://demo.getvum.com/#/

star★:816

demo:demo.getvum.com/#!/

docs:http://getvum.com/

github: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: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:github.com/ydcss/vue-ydui

Vuwe

Vuwe是一款基于微信WeUI所开发的,专用于Vue2的组件库;

 

它于WeUI完全解耦,用户通过自定义WeUI的样式文件,可以方便地对VUWE实现定制化。

 

github:github.com/vuwe/vuwe

star★:122

demo:https://vuwe.github.io/vuwe/#/

docs:https://vuwe.github.io/vuwe/doc.html#/

github:github.com/vuwe/vuwe

WE-VUE

简单易用的Vue.js组件。地址--https://wevue.org/

简单易用;文档完善;在线示例。

简单易用:we-vue组件使用简单,配置很容易。支持多种引入方式。对于对vue有一定了解的开发者,一定能很快上手。

star★:37

demo:http://wevue.org/

github: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:vuematerial.github.io/#/

docs:vuematerial.github.io/#/getting-s…

github:github.com/marcosmoura…

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:github.com/museui/muse…

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: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/#!…

docs:https://luojilab.github.io/radon-ui/#!/

github: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:ccforward.github.io/rubik/#/

docs:ccforward.github.io/rubik/#/

github:github.com/ccforward/r…

                                         --------------------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:github.com/OnsenUI/OnsenUI/tree/master/bindings/vue

 

Quasar

 

Quasar--https://quasar-framework.org/

star★:1.8k

demo:quasar-framework.org/components/…

docs:quasar-framework.org/guide/index…

github:github.com/quasarframe…

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:github.com/nolimits4web/Framework7-Vue

 

补充于:2018/09/19

(今天,在《前端开发》又看到了VUE的开源项目,有些vue库,未整理,再此添加进去,重复部分请忽略。参考链接:my.oschina.net/u/3018050/b…

二、补充新的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编辑器