16款优秀的Vue UI组件库推荐
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
Vuetify 完全根据 Material Design 规范开发。每个组件都是手工制作的，为您的下一个伟大的应用程序带来最好的 UI 工具。开发并没有停留在 Google 规范中的核心组件上。通过社区成员和赞助商的支持，更多的组件将被设计并提供给大家享受。
这个主要是国外比较流行的 vue ui 组件，各种功能都有，有中文翻译的，但有些还是英文的，翻译得不是很好
PS：国内的 UI 组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid 表格很多都是没有的。