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 中文网
http://www.quasarchs.com/

quasarframework/quasar: Quasar Framework
https://github.com/quasarframework/quasar

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官网:https://www.iviewui.com/

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官网:https://vux.li/

3、Element UI组件库
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element是饿了么前端开源维护的Vue UI组件库,更新频率还是很高的,基本一周到半个月都会发布一个新版本。组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。没有实际使用过,网上的Element教程和文章比较多。Element应该是一个质量比较高的Vue UI组件库。
Element官网:http://element.eleme.io/#/zh-CN

4、Mint UI组件库
Mint UI基于 Vue.js 的移动端组件库,同样出自饿了么前端的项目。Mint UI是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于Mint UI来讲的,开发移动端web项目还是很方便,文档也很简介明了。很多页面Mint UI组件都已经封装好,基本可以照着例子写,简单的调整一下就可以实现。不过,在GitHub上看最后一次代码提交在2018年1月16日。不知道是项目比较稳定没有更新,还是项目有被废弃的可能。
Mint UI官网:http://mint-ui.github.io/#!/zh-cn

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官网:https://bootstrap-vue.js.org/

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官网:https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

7、AT-UI UI组件库
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库,主要用于快速开发 PC 网站中后台产品,支持现代浏览器和 IE9 及以上。AT-UI 更加精简,实现了后台常用的组件。
AT_UI官网:https://at-ui.github.io/at-ui/#/zh

8、Vant UI组件库
Vant是一个轻量、可靠的移动端 Vue 组件库。Vant是有赞团队开源的,主要维护也是有赞团队。Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。截止到目前,Vant已经开源了50+ 个经过有赞线上业务检验的组件。比如:、AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、Contact 联系人、Coupon 优惠券、GoodsAction 商品页行动点、SubmitBar 提交订单栏、Sku 商品规格弹层。如果做商城的,不太在意界面,实现业务逻辑的话,用Vant组件库开发还是很快的。
Vant官网:https://youzan.github.io/vant/#/zh-CN/intro

9、cube-ui UI组件库
cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
cube-ui官网:https://didi.github.io/cube-ui/#/zh-CN

10、Muse-UI UI组件库
Muse-UI基于 Vue 2.0 优雅的 Material Design UI 组件库。Muse UI 拥有40多个UI 组件,用于适应不同业务环境。Muse UI 仅需少量代码即可完成主题样式替换。Muse UI 可用于开发的复杂单页应用
Muse-UI官网:https://muse-ui.org/#/zh-CN

11、N3-components UI组件库
N3组件库是基于Vue.js构建的,让前端工程师和全栈工程师能快速构建页面和应用。N3-components超过60个组件 组件列表、自定义样式、支持多种模化范式(UMD)、使用ES6进行开发。
N3官网:https://n3-components.github.io/N3-components/component.html

12、Mand Mobile
Mand Mobile是面向金融场景的Vue移动端UI组件库,丰富、灵活、实用,快速搭建优质的金融类产品,让复杂的金融场景变简单。Mand Mobile含有丰富的组件30+的基础组件,覆盖金融场景,极高的易用性组件均有详细说明文档、案例演示,汲取最前沿技术,组件化轻量化实现,兼顾稳定和品质,努力实现金融场景的全覆盖。
Mand Mobile官网:https://didi.github.io/mand-mobile/#/zh-CN/home

下面是1.x的文档和演示地址:(文档地址已经迁移了)

https://mand-mobile.github.io/1x-doc/
https://mand-mobile.github.io/2x-doc/

之前的地址打不开了

13、we-vue UI组件库
we-vue 是一套基于 Vue.js 的移动关组件库,结合 weui.css 样式库,封装了一系列组件,非常适于微信公众号等移动端开发。we-vue 包含35+ 个组件,单元测试覆盖率超 98%,支持 babel-plugin-import,完善的在线文档,详细的在线示例。
we-vue官网:https://wevue.org/

14、veui UI组件库
veui是一个由百度EFE team开发的Vue企业级UI组件库。目前文档还没有,只有demo。
GitHub上说是正在进行的一项工作。那我们就耐心等待吧。
veui官网:https://ecomfe.github.io/veui/components/#/

15、Semantic-UI-Vue UI组件库
Semantic-UI-Vue是基于 Vue.js对Semantic-UI 框架的实现。
Semantic作为一款开发框架,帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。Semantic-UI-Vue提供了一个类似于 Semantic-UI 的 API 以及一组可定制的主题。
Semantic-UI-Vue官网:https://semantic-ui-vue.github.io/#/
在选择框架的时候一定要根据实际Web开发情况和团队的熟悉程度来选择。一个好的UI组件库对一个Web项目来说很重要

16.Vue.js Material Component Framework — Vuetify.js

https://vuetifyjs.com/zh-Hans

Vuetify完全根据Material Design规范开发。每个组件都是手工制作的,为您的下一个伟大的应用程序带来最好的UI工具。开发并没有停留在Google规范中的核心组件上。通过社区成员和赞助商的支持,更多的组件将被设计并提供给大家享受。

这个主要是国外比较流行的vue ui组件,各种功能都有,有中文翻译的,但有些还是英文的,翻译得不是很好

PS:国内的UI组件大部分都只有一部分的,常用的头部导航,底部导航,listview,grid表格很多都是没有的。

转载于:https://www.cnblogs.com/zdz8207/p/vue-ui-framework.html

16款优秀的Vue UI组件库推荐相关推荐

  1. 你知道这些吗?8款优秀的Vue UI组件库推荐,都能打开呦

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入 ...

  2. 17款优秀的Vue UI组件库汇总

    17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...

  3. 优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  4. vant引入组件报错_强烈推荐优秀的Vue UI组件库

    在我们实际开发中常常因为项目周期短不得不引入一些UI框架来辅助开发 那常见的比较好的UI框架有那些呢(基于VUE) Element UI组件库 (pc端) Element,一套为开发者.设计师和产品经 ...

  5. 14 个最佳 Vue UI 组件库推荐

    Vue.js 是无数前端开发人员首选的 JavaScript 框架,因为它易于学习和使用. 组件是 Vue 框架的核心--它们可以帮助你更快地从想法转变为功能性 UI. 在这个集合中,您可以找到最好的 ...

  6. Vue UI组件库总结推荐

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面,准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.co ...

  7. 创建, 发布自己的 Vue UI 组件库

    创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便 ...

  8. ajax插件库,03.vue-ajax、vue UI 组件库

    vue-ajax vue 项目中常用的 2 个 ajax 库 vue-resource: vue 插件, 非官方库, vue1.x 使用广泛 axios: 通用的 ajax 请求库, 官方推荐, vu ...

  9. 【Vue学习】—Vue UI组件库(二十八)

    [Vue学习]-Vue UI组件库(二十八) 一.移动端常用的UI组件库 二.PC端常用的UI组件库 三.具体使用自行查看文档,这里就不做概述了

最新文章

  1. 类从未使用_如果您从未依赖在线销售,如何优化您的网站
  2. 在idae中为什么用Module创建一个新的Maven项目的时候会被卡死
  3. 【MyBatis笔记】01-MyBatis入门程序
  4. POJ3159-Candies
  5. 图神经网络(一)--综述
  6. 让一个.sh文件一直运行_想做AI鉴黄工具?这有一个内含20多万张“不可描述”图片的数据集...
  7. 编程必备的最基本5种算法思想
  8. 金蝶K3后台SQL修改数据-科目余额表、科目表核算项目
  9. 在vue中使用iconfont多色图标
  10. 如何将代码写的更加优雅?
  11. 第一次在OJ上写个a+b简直弱爆了。。。。
  12. JAVA:Java Swing 练习题
  13. Auto CAD 2020安装教程附安装包下载-详细教程
  14. 检查文件编码是什么格式的
  15. Java将List对象导入Excel文件
  16. 英文星期的来历(都是来自神人)
  17. 看了这篇文章我才真正理解了!和快手大佬的技术面谈,附架构师必备技术详解
  18. PowerShell对象的批处理方法
  19. hive 本地模式 远程模式操作
  20. ARP断网欺骗攻击利用工具

热门文章

  1. python操作excel-python操作excel(内附python教程分享)
  2. python编程入门书籍推荐-给刚入门python的朋友推荐几本书
  3. python白名单验证-Python中XSS白名单过滤的实现
  4. python教程第四版pdf下载-Python参考手册 第4版高清中文PDF下载
  5. python图片识别-用10行Python代码进行图像识别
  6. python整理excel数据-Python 之Excel 数据处理
  7. python怎么做图形界面-图形界面
  8. python编程入门到实践 百度云-python网络爬虫从入门到实践pdf
  9. python编程培训多少钱-python编程培训多少钱?[python培训]
  10. python培训出来的有公司要吗-Python培训班出来好找工作吗?