16款优秀的VueUI组件库推荐
16款优秀的Vue UI组件库推荐
Vue 是⼀个轻巧、⾼性能、可组件化的MVVM库,API简洁明了,上⼿快。从Vue推出以来,得到众多Web开发者的认可。
在公司的Web前端项⽬开发中,多个项⽬采⽤基于Vue的UI组件框架开发,并投⼊正式使⽤。
开发团队在使⽤Vue.js框架和UI组件库以后,开发效率⼤⼤提⾼,⾃⼰写的代码也少了,很多界⾯效果组件已经封装好了。
在选择Vue UI组件库的过程中,通过GitHub上根据star数量、⽂档丰富程度、更新的频率以及维护等因素,也收集整理了⼀些优秀的Vue UI 组件库。
PS:国内的UI组件⼤部分都只有⼀部分的,常⽤的头部导航,底部导航,listview,grid表格很多都是没有的。
后⾯才发现,基于Vue的Quasar Framework 介绍这个框架UI组件很全⾯,准备下次使⽤这个框架了
基于Vue的Quasar Framework 中⽂⽹
quasarframework/quasar: Quasar Framework
Quasar(发⾳为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发⼈员创建:
响应式⽹站
PWA(Progressive Web App)
通过Apache Cordova构建移动APP(Android,iOS,…)
多平台桌⾯应⽤程序(使⽤Electron)
Quasar允许开发⼈员编写⼀次代码,然后使⽤相同的代码库同时部署为⽹站、PWA、Mobile App和Electron App。使⽤最先进的CLI设计应⽤程序,并提供精⼼编写,速度⾮常快的Quasar Web组件。
当使⽤Quasar时,你不需要像Hammerjs,Momentjs或Bootstrap这样的额外重型库。它拥有这些功能,⽽且体积很⼩!
==============
1、 iView UI组件库
iView 是⼀套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界⾯的中后台产品。iView的组件还是⽐较齐全的,更新也很快,⽂档写得很详细。有公司团队维护,⽐较可靠的Vue UI组件框架。iView⽣态也做得很好,还有开源了⼀个iView Admin,做后台⾮常⽅便。官⽹上介绍,iView已经应⽤在TalkingData、阿⾥巴巴、百度、腾讯、今⽇头条、京东、滴滴出⾏、美团、新浪、联想等⼤型公司的产品中。iView官⽹:
2、Vux UI组件库
Vux是基于WeUI和Vue2.x开发的移动端UI组件库,主要服务于页⾯。Vux的定位已经很明确了,⼀是:Vue移动端UI组件库,⼆是:WeUI的基础样式库。Vux的组件涵盖了所有的WeUI的内容,还扩展了⼀些常⽤的组件。⽐如:Sticky、timeline、v-chart、XCircle。Vux是个⼈维护的。但是GitHub上star还是很⾼的,达到13k。在GitHub上看到对issue的关闭还是很迅速的。Vux⽂档基本的组件⽤法和效果都讲解到位了。在vux官⽹上也展⽰了很多Vux的使⽤案例。在页⾯开发中,基本没有太多的bug,开发还是⽐较顺⼿的。
Vux官⽹:
3、Element UI组件库
Element,⼀套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌⾯端组件库。Element是饿了么前端开源维护的Vue UI组件库,更新频率还是很⾼的,基本⼀周到半个⽉都会发布⼀个新版本。组件齐全,基本涵盖后台所需的所有组件,⽂档讲解详细,例⼦也很丰富。没有实际使⽤过,⽹上的Element教程和⽂章⽐较多。Element应该是⼀个质量⽐较⾼的Vue UI组件库。
Element官⽹:
4、Mint UI组件库
Mint UI基于 Vue.js 的移动端组件库,同样出⾃饿了么前端的项⽬。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式⽂件。Mint UI 采⽤ CSS3 处理各种动效,避免浏览器进⾏不必要的重绘和重排,从⽽使⽤户获得流畅顺滑的体验。⽹上的视频教程很多都是基于Mint UI来讲的,开发移动端web项⽬还是很⽅便,⽂档也很简介明了。很多页⾯Mint UI组件都已经封装好,基本可以照着例⼦写,简单的调整⼀下就可以实现。不过,在GitHub上看最后⼀次代码提交在2018年1⽉16⽇。不知道是项⽬⽐较稳定没有更新,还是项⽬有被废弃的可能。
Mint UI官⽹:
5、Bootstrap-Vue UI组件库
Bootstrap-VUE提供了基于vue2的Bootstrap V4组件和⽹格系统的实现,完成了⼴泛和⾃动化的WAI ARA可访问性标记。Bootstrap 4是最新发布的版本,与 Bootstrap3 相⽐拥有了更多的具体的类以及把⼀些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的⽀持,现在仅仅⽀持 IE9 以上以及 iOS 7 以上版本的浏览器。想当初刚流⾏响应式⽹站的时候,Bootstrap是世界上最受欢迎的建⽴移动优先⽹站的框架,Bootstrap可以说风靡全球。就算放在现在很多企业⽹站都是采⽤Bootstrap做的响应式。Bootstrap-Vue可以让你在Vue中也实现Bootstrap的效果。
Bootstrap-Vue官⽹:
6、Ant Design Vue UI组件库
Ant Design Vue是 Ant Design 3.X 的 Vue 实现,开发和服务于企业级后台产品。在GitHub上可以到⼏个Ant Design的Vue组件。不过相⽐较⽽⾔,Ant Design Vue更胜⼀筹。Ant Design Vue共享Ant Design of React设计⼯具体系,实现了所有Ant Design of React的组件,⽀持现代浏览器和 IE9 及以上(需要 polyfills)。可以让熟悉Ant Design的在使⽤Vue时,很容易的上⼿。
Ant Design Vue官⽹:
7、AT-UI UI组件库
AT-UI 是⼀款基于 Vue.js 2.0 的前端 UI 组件库,主要⽤于快速开发 PC ⽹站中后台产品,⽀持现代浏览器和 IE9 及以上。AT-UI 更加精简,实现了后台常⽤的组件。
AT_UI官⽹:
8、Vant UI组件库
Vant是⼀个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的,主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的⼩程序版本,两者基于相同的视觉规范,提供⼀致的 API 接⼝,助⼒开发者快速搭建⼩程序应⽤。截⽌到⽬前,Vant已经开源了50+ 个经过有赞线上业务检验的组件。⽐如:、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡⽚、Contact 联系⼈、Coupon 优惠券、GoodsAction 商品页⾏动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的,不太在意界⾯,实现业务逻辑的话,⽤Vant组件库开发还是很快的。
Vant官⽹:
9、cube-ui UI组件库
cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼⽽来,经历了业务⼀年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。在交互体验⽅⾯追求极致。遵循
统⼀的设计交互标准,⾼度还原设计效果;接⼝标准化,统⼀规范使⽤⽅式,开发更加简单⾼效。⽀持按需引⼊和后编译,轻量灵活;扩展性强,可以⽅便地基于现有组件实现⼆次开发。
cube-ui官⽹:
10、Muse-UI UI组件库
Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件,⽤于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可⽤于开发的复杂单页应⽤
Muse-UI官⽹:
11、N3-components UI组件库
N3组件库是基于Vue.js构建的,让前端⼯程师和全栈⼯程师能快速构建页⾯和应⽤。N3-components超过60个组件组件列表、⾃定义样式、⽀持多种模化范式(UMD)、使⽤ES6进⾏开发。
N3官⽹:
12、Mand Mobile
Mand Mobile是⾯向⾦融场景的Vue移动端UI组件库,丰富、灵活、实⽤,快速搭建优质的⾦融类产品,让复杂的⾦融场景变简单。Mand Mobile含有丰富的组件30+的基础组件,覆盖⾦融场景,极⾼的易⽤性组件均有详细说明⽂档、案例演⽰,汲取最前沿技术,组件化轻量化实现,兼顾稳定和品质,努⼒实现⾦融场景的全覆盖。
Mand Mobile官⽹:
下⾯是1.x的⽂档和演⽰地址:(⽂档地址已经迁移了)
之前的地址打不开了
13、we-vue UI组件库
we-vue 是⼀套基于 Vue.js 的移动关组件库,结合 weui.css 样式库,封装了⼀系列组件,⾮常适于等移动端开发。we-vue 包含35+ 个组件,单元测试覆盖率超 98%,⽀持 babel-plugin-import,完善的在线⽂档,详细的在线⽰例。
we-vue官⽹:
14、veui UI组件库
veui是⼀个由百度EFE team开发的Vue企业级UI组件库。⽬前⽂档还没有,只有demo。
GitHub上说是正在进⾏的⼀项⼯作。那我们就耐⼼等待吧。
veui官⽹:
15、Semantic-UI-Vue UI组件库
Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。
Semantic作为⼀款开发框架,帮助开发者使⽤对⼈类友好的HTML语⾔构建优雅的响应式布局。Semantic-UI-Vue提供了⼀个类似于Semantic-UI 的 API 以及⼀组可定制的主题。
Semantic-UI-Vue官⽹:
在选择框架的时候⼀定要根据实际Web开发情况和团队的熟悉程度来选择。⼀个好的UI组件库对⼀个Web项⽬来说很重要
16.Vue.js Material Component Framework — Vuetify.js
electron vue教程Vuetify完全根据Material Design规范开发。每个组件都是⼿⼯制作的,为您的下⼀个伟⼤的应⽤程序
带来最好的UI⼯具。开发并没有停留在Google规范中的核⼼组件上。通过社区成员和赞助商的⽀持,更多的组件将被设计并提供给⼤家享受。
这个主要是国外⽐较流⾏的vue ui组件,各种功能都有,有中⽂翻译的,但有些还是英⽂的,翻译得不是很好
PS:国内的UI组件⼤部分都只有⼀部分的,常⽤的头部导航,底部导航,listview,grid表格很多都是没有的。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论