vue UI组件库对比（pc）

背景

最近因工作原因对vue UI组件库进行选型，做个学习笔记，主要研习了element、iView、Ant Design of Vue、HeyUI这几个框架，仅供参考。

主要从以下几个方面

1. 使用率
2. 入门
3. 组件实现功能

框架介绍

框架	官网链接	GitHub地址	开箱即用系统
element	https ://element.eleme.cn	github.com/ElemeFE/ele…	/
iView	www.iviewui.com/	github.com/view-design…	GitHub: github.com/iview/iview… 演示地址: admin.iviewui.com/login
Ant Design of Vue	www.antdv.com/	github.com/vueComponen…	GitHub:github.com/sendya/ant-… (非官方)
HeyUI	www.heyui.top/	github.com/heyui/heyui…	GitHub: github.com/heyui/heyui… 演示地址: admin.heyui.top/

使用率

element

iView

Ant Design of Vue

HeyUI

总结（个人观点）

综上所观，element-ui活跃度最高，团队维护力度也比较大，bug修复功能完善也是几个框架中做的最好的,不足在于官方并没有给出开箱即用的后台管理系统。
iView活跃度仅次于element-ui,团队维护力度仅优于HeyUI,虽然官方给出了开箱即用的后台管理系统，但是该系统完善版本需要付费使用。
ant-design-of-vue据我最早接触的事react版本，功能还是比较齐全的，官方只给出了react版开箱即用的后台管理系统。 hey-ui团队维护力度等各方面都不如前几个组件库,比较小众化

入门

框架	element	iView	Ant Design of Vue	HeyUI
国际化	内置大部分语言可借助vue-i18n	内置三种语言 可借助vue-i18n	内置大部分语言可借助vue-i18n	内置四种语言 可借助vue-i18n
按需加载	借助 babel-plugin-component	借助插件 babel-plugin-import	单独引入即可	借助插件 babel-plugin-import
主题	定制/更换	定制/更换	定制/更换	更换

组件实现功能

框架	element	iView	Ant Design of Vue	HeyUI
Layout 布局	✔	✔	✔	✔
Grid 栅格	✔	✔	✔	✔
Container 布局容器	✔	✖	✖	✖
List 列表	✖	✔	✔	✖
Split 面板分割	✖	✔	✖	✖
Cell 单元格	✖	✔	✖	✖
Color 色彩	✔	✔	✖	✔
Extend 扩展	✖	✖	✖	✔
Typography 字体	✔	✔	✖	✖
Border 边框	✔	✖	✖	✖
Icon 图标	✔	✔	✔	✔
Button 按钮	✔	✔	✔	✔
Link 文字链接	✔	✖	✖	✖
Anchor 锚点	✖	✔	✔	✖
Radio 单选框	✔	✔	✔	✔
Checkbox 多选框	✔	✔	✔	✔
Input 输入框	✔	✔	✔	✔
AutoComplete 自动完成	✔	✔	✔	✔
InputNumber 计数器	✔	✔	✔	✔
TagInput 标签输入	✖	✖	✖	✔
SwitchList 选项	✖	✖	✖	✔
Search 搜索框	✖	✖	✖	✔
Category 分类选择	✖	✖	✖	✔
CategoryPicker	✖	✖	✖	✔
Select 选择器	✔	✔	✔	✔
Cascader 级联选择器	✔	✔	✔	✖
Switch 开关	✔	✔	✔	✔
Slider 滑块	✔	✔	✔	✔
TimePicker 时间选择器	✔	✔	✔	✔
DatePicker 日期选择器	✔	✔	✔	✔
DateTimePicker 日期时间选择器	✔	✖	✖	✔
Upload 上传	✔	✔	✔	✔
Rate 评分	✔	✔	✔	✔
ColorPicker 颜色选择器	✔	✔	✖	✔
Transfer 穿梭框	✔	✔	✔	✔
Form 表单	✔	✔	✔	✔
Table 表格	✔	✔	✔	✔
Tag 标签	✔	✔	✔	✔
Progress 进度条	✔	✔	✔	✔
加载占位图	✖	✖	✔	✔
Tree 树形控件	✔	✔	✔	✔
树型选择控件	✖	✖	✔	✔
Pagination 分页	✔	✔	✔	✔
Badge 标记	✔	✔	✔	✔
Avatar 头像	✔	✔	✔	✔
Alert 警告	✔	✔	✔	✖
Loading 加载	✔	✔	✔	✔
LoadingBar 加载进度条	✖	✔	✖	✔
Circle 进度环	✖	✔	✖	✔
Message 消息提示	✔	✔	✔	✔
MessageBox 弹框	✔	✔	✔	✔
Notification 通知	✔	✔	✔	✔
NavMenu 导航菜单	✔	✔	✔	✔
Tabs 标签页	✔	✔	✔	✔
Breadcrumb 面包屑	✔	✔	✔	✔
PageHeader 页头	✔	✖	✖	✖
Dropdown 下拉菜单	✔	✔	✔	✔
DropdownCustom 自定义下拉控件	✖	✖	✖	✔
Clipboard 复制剪切板	✖	✖	✖	✔
TextEllipsis 超出文本省略	✖	✖	✖	✔
ScrollIntoView 滚动至视图内	✖	✖	✖	✔
Steps 步骤条	✔	✔	✖	✖
Dialog 对话框	✔	✖	✖	✖
Tooltip 文字提示	✔	✔	✔	✔
Popover 弹出框	✔	✔	✔	✔
Popconfirm 气泡确认框	✔	✔	✔	✔
Card 卡片	✔	✔	✔	✔
Carousel 走马灯	✔	✔	✔	✔
Collapse 折叠面板	✔	✔	✔	✔
Comment 评论	✖	✖	✔	✖
Statistic 统计数值	✖	✖	✔	✖
空状态	✖	✖	✔	✖
Timeline 时间线	✔	✔	✔	✔
Time 相对时间	✖	✔	✖	✖
Divider 分割线	✔	✔	✔	✖
Calendar 日历	✔	✖	✔	✖
Image 图片	✔	✖	✖	✖
ImagePreview	✖	✖	✖	✔
Backtop 回到顶部	✔	✔	✔	✔
Drawer 抽屉	✔	✔	✔	✖
InfiniteScroll 无限滚动	✔	✔	✖	✖
Affix 图钉	✖	✔	✔	✔
ConfigProvider 全局化配置	✖	✖	✔	✖

总结

综上所观，UI组件所实现的功能大多都一样，都具有最常用的表单、表格、弹框等常用的组件