前端UI库对比

前端UI库的选择会直接决定产品的页面主基调风格，特别是一些高度封装的组件，例如时间日期控件，级别联动或者树形控件，一旦确定UI库，风格就将锁定。另外不同的UI库、组件库数量的多少、封装的完善度、使用体验、是否存在隐藏bug也是不一样的。我下面罗列了几种针对PC端web开发最常用的几种UI组件库，可以点击链接感受一下各自的UI风格，然后晶姐再找个时间和大家碰一下，给出最终选择方案吧。

Element UI

开发团队：饿了么前端
官网：https://element.eleme.cn/#/zh-CN
github（ star：44.1k ）：https://github.com/ElemeFE/element

Element-UI 是目前针对于 Vue 开发 PC 端项目的时候所使用到的一个主流 UI 库，在pc端项目开发中使用广泛。

特点 ：

1. Element-UI 是现在基于 Vue 的一个非常好用的桌面端 UI 组件库
2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、支持自定义主题
3. 文档清晰，学习成本低
4. 提供的组件足够使用
5. UI 的风格符合目前大众的普遍审美
6. 如果你想要做一个公司级别的产品，那么 Element-UI 基本可以满足需求

参考图：

vuetify

开发团队：麻省理工学院开源项目
官网：https://vuetifyjs.com/zh-Hans/
github（ star：24.1k ）：https://github.com/vuetifyjs/vuetify

​vuetify 是麻省理工学院的开源项目，在国内项目使用比较小众。
​ElementUI更侧重创建一组风格统一、高效且易于上手的理念，而Vuetify框架讲究多平台适配，与Google设计MaterialDesign设计风格搭配到一起，代码量会比Element稍微大一些，但对于自己做屏幕分辨率适配还是轻松不少。（最新的Vuetify框架还没有中文文档，这一点上自然比不上ElementUI这种本土框架，后期会慢慢适配的，近日想学习Vuetify框架，但英语水平也不是那么好的话，可以进入官网后点击下图红色划线部分进入旧版文档）

​ 特点：

1. vuetify 是国外团队进行开发的一个基于 vue 的组件库
2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、提供了定制功能（样式、颜色、主题等等）
3. 文档相对清晰，但是和国人的思维不太一样，导致学习成本相对高一些
4. 提供的组件足够使用，并且提供了 v- 开头的扩展指令，还有付费专题模块
5. UI 的风格使用的是 Google 推出的 Material Design 的设计风格，在国内推广度相对低一些
6. 使用 vuetify 在 UI 样式上，会有一些额外的风险，但是可以避免同质化的问题，比较适合一些个人或者需要彰显个性的项目

参考图：

Ant Design

开发团队：蚂蚁金服体验技术部
官网：https://ant.design/index-cn
github（ star：57.6k ）：https://github.com/ant-design/ant-design/

Ant Design 在 react 中的地位，应该和 element UI 在 vue 中的地位是一样的，都可以说是最火爆的 UI 库之一。

Ant Design 同时支持 React、Vue、Angular，也就是说我们在这三个主流框架中都可以使用，但是 Ant Design 对于React 的支持是最好的，所以一般我们说到 Ant Design ，都会说他是一个基于 React UI 的一个组件库。

对于 Ant Design 来说，如果把它作为 React 项目的一个核心 UI 库的话，那么它是完全可以胜任的，没有一点问题。并且无论是它的开发团队也好，它的一个社区也好，都可以很好的保证该库的一个正常的升级和迭代。

特点：

1. Ant Design 是阿里巴巴-蚂蚁金服体验技术部所设计的一个 UI 库，一般用于基于 React 的项目
2. 支持在 create-react-app（React 官方脚手架） 项目的直接添加，支持按需导入、国际化、提供了定制主题
3. 文档清晰，学习成本低
4. 提供的组件足够使用，并且提供了精品社区服务
5. UI 的风格符合目前大众的普遍审美
6. 如果你想要做一个公司级别的产品，那么 Ant Design 基本可以满足需求，但是难免样式、风格上会同质化严重

Ant Design Pro

Ant Design升级版，由蚂蚁金服开发的一套开箱即用的中台前端/设计解决方案，基于 Ant Design 体系精心设计，提炼自中后台应用的典型页面和场景，使用 React/dva/antd 等前端前沿技术开发。

地址：https://preview.pro.ant.design/dashboard/analysis?primaryColor=%231890ff&fixSiderbar=true&colorWeak=false&pwa=false

参考图：

iview

比较常用的前端UI库

地址：http://v1.iviewui.com/docs/introduce

参考图：

layui

开发团队：自由职业者（贤心）
官网：https://www.layui.com/
github（ star：21.1k ）：https://github.com/sentsin/layui/

特点：

1. layui 是 自由职业者（贤心）进行开发的一个前端库，最低可以兼容到 IE8
2. 设置的初衷是让非前端的工程师可以很方便的开发前端页面
3. 使用简单，文档清晰，学习成本低
4. 提供页面元素和模块化的概念
5. UI 的风格并不过时
6. 适合非专业前端工程师使用

参考图：