2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue

2018年我写的Vue组件库对比文档：
juejin.im/post/5a9628…

一年的时间，每个组件库都有了更多的发展，Ant Design 也出了vue版本的组件库。

因此，在今年，我对目前发展比较稳定以及功能比较齐全的 Vue组件库作出了评测。

🐔关于评测

相信看这一篇文章的人，确定也会对 “选择使用哪一个组件库？” 这个问题感到烦恼。

组件库的选择，对于前端系统的开发有着相当紧要的影响，

而组件的丰富性以及健壮性是咱们要考虑的重点。

因此，本次比对，主要是从组件的多少，以及核心组件的对比来评判。

而对于选择哪一个组件库的这个问题，其实，我从开发者的角度来讲，每一个组件库均可以选择，基本上，四种组件库都已经挺完善的了，开发者按照本身的需求选择便可。

💐组件库

Element UI

官方网站：element.eleme.io/#/

Github: github.com/ElemeFE/ele…

iView UI

官方网站：www.iviewui.com/

Github: github.com/iview/iview

Ant Design of Vue

官方网站：vue.ant.design/docs/vue/in…

Github: github.com/vueComponen…

HeyUI

官方网站：www.heyui.top/

Github: github.com/heyui/heyui…

🚀组件对比

我花了一些时间，对这四款组件库作了一个比较详细的比较。

基础组件

四个组件库，大概有48个都具有的组件。

• Grid 栅格
• Layout 布局
• Icon 图标
• Button 按钮
• Input 输入框
• Radio 单选
• Checkbox 多选
• Select 下拉选择
• AutoComplete 模糊匹配
• NumberInput 数字输入
• Switch 开关
• Slider 滑块
• Rate 评分
• SwitchList 选项切换
• Form 表单
• Search 搜索框
• Uploader 上传
• Tree 树
• Transfer 穿梭框
• DatePicker 日期选择
• TimePicker 时间选择
• DatetimePicker 日期时间选择
• DateRangePicker 日期范围选择
• Cascader 级联选择
• Breadcrumb 面包屑
• Menu 菜单
• Pagination 分页
• Tabs 标签页
• Steps 步骤条
• DropdownMenu 下拉菜单
• BackTop 返回顶部
• Panel 面板
• Tag 标签
• Table 表格
• Avatar 头像信息
• Badge 微标数
• Carousel 走马灯
• Collapse 折叠面板
• Progress 进度条
• Loading 加载中
• LoadingBar 加载进度条
• Timeline 时间轴
• Message 提示
• Notice 通知
• Modal 弹出框
• Tooltip 气泡提示
• Poptip 肯定提示
• Circle 进度环

PS，每一个组件库不必定是相同的命名，可是，大体是同样的组件。

其中，Form，Table，Select，AutoComplete，Tree，DatePicker是我认为的一个组件库的核心组件。

而不一样的组件库在这几个组件上的实现，都是有比较多差别的。

这里，我主要着重于Table的差别分析，其余的组件，用户能够参考本身的需求，再逐一对比。

Table 组件对比

统计中关于“自定义索引”，iview 与 Ant Design Vue我并未看到相关文档，不必定正确。

相对来讲，Element和Ant Design Vue在Table上的功能稍微比较多，若是，大家系统的Table应用需求比较多，我比较建议使用这两种组件。

其余组件对比

从上图的对比能够看出，每种组件库，都有不一样类型的发展，因此，你们在选择的时候，也能够着重参考一下。

比对总结

在目前的时间节点来看，每一种组件库都已经达到了一个功能完满的状态，就算后期更新，也应该只是小幅度的更新。

开发在技术选型的时候，能够根据本身的需求进行选择。

本期评测结果，其实也挺出乎个人意外的，每一种组件库在组件设计选择上，不尽相同，可是最终的组件总数上，都是差很少的。

✨组件推荐

每一种组件库，有拥有比较独特亮眼的组件，这里，我集中作一下推荐，你们也能够参考本身的需求来作选择。

iView - Split 面板分割

对于展现的内容作切割，而且能够经过拖动的方式修改分割。

连接：www.iviewui.com/components/…

HeyUI - DateFullRangePicker 超级日期范围控件

超级日期范围控件算是一个比较实用的功能，基本知足日期范围选择的全部需求。

连接：www.heyui.top/component/d…

Element - Calendar 日历

基础日历的展现

连接：element.eleme.io/#/zh-CN/com…

HeyUI - TreePicker 树选择器

经过Tree模式的数据，选择数据。

连接：www.heyui.top/component/p…

Ant Design Vue - TreeSelect 树选择器

经过Tree模式的数据，选择数据。

连接：vue.ant.design/components/…

HeyUI - CategoryPicker 联动选择器

选择联动关联的信息。

连接：www.heyui.top/component/o…

Element - Image 图片

集成图片展现的全部需求

连接：element.eleme.io/#/zh-CN/com…

HeyUI - ImagePreview 图片预览

图片预览功能以及图片列表展现。

连接：www.heyui.top/component/o…

Element - v-loading 加载中

经过指令的方式控制加载中的样式

连接：element.eleme.io/#/zh-CN/com…

HeyUI - TextEllipsis 超出文本省略

超出多行文本省略功能。

连接：www.heyui.top/component/o…

HeyUI - Clipboard 复制剪切板

复制剪切板集成

连接：www.heyui.top/component/o…