ant-design-vue、element框架选型对比

ant-design-vueelement文档https://www.antdv.com/docs/vue/introduce-cn/https://element.eleme.cn团队蚂蚁金服饿了么简介开发和服务于企业级后台产品基于vue的桌面端组件库githubhttps://github.com/vueComponent/ant-design-vuehttps://github.com/E

monkey01127

9591人浏览 · 2021-08-25 17:00:11

monkey01127 · 2021-08-25 17:00:11 发布

指标对比

	ant-design-vue	element
文档地址	https://www.antdv.com/docs/vue/introduce-cn/	https://element.eleme.cn
团队	蚂蚁金服	饿了么
简介	开发和服务于企业级后台产品	基于vue 2.0的桌面端组件库
github	https://github.com/vueComponent/ant-design-vue	https://github.com/ElemeFE/element
最新版本	V2.2.6(当前使用版本：V1.7.3)	V2.15.5
第一版本	2018-04-20(V0.4.0)	2016-11-09(V1.0.0)
star/fork	15.1K/2.6K	50.7K/13.k
成熟度	element相对高
设计与产品	sketch、生态、协作更有优势	Axure
UI功能	ant更全面些，参见如下具体表格对比
场景	相对复杂的后台管理平台(偏逻辑)	快速上手
文档	文档结构以及回调参数说明有部分不明确
学习成本	相对高	简单
初次版本地址	https://github.com/vueComponent/ant-design-vue/releases?after=0.6.1	https://github.com/ElemeFE/element/releases?after=v1.1.0

具体组件功能对比

	ant-design-vue	element
Button 按钮	✔️	✔️ (Link 文字链接)
Icon图标	✔️	✔️
Grid 栅格	✔️	✔️ (Layout 布局)
Layout布局	✔️	✔️ (Container 布局容器)
Space 间距	✔️
Affix 固钉	✔️
Breadcrumb 面包屑	✔️	✔️
Dropdown 下拉菜单	✔️	✔️
Menu 导航菜单	✔️	✔️ (NavMenu 导航菜单)
PageHeader页头	✔️	✔️
Pagination 分页	✔️	✔️
Steps 步骤条	✔️	✔️
AutoComplete 自动完成	✔️
Cascader 级联选择	✔️	✔️
Checkbox 多选框	✔️	✔️
DatePicker 日期选择框	✔️	✔️ (DateTimePicker 日期时间选择器)
Form 表单	✔️
FormModel 表单 (支持 v-model 检验)	✔️	✔️
Input 输入框	✔️	✔️
InputNumber 数字输入框	✔️	✔️
Mentions 提及	✔️
Radio 单选框	✔️	✔️
Rate 评分	✔️	✔️
Select 选择器	✔️	✔️
Slider 滑动输入条	✔️	✔️
Switch 开关	✔️	✔️
TimePicker 时间选择框	✔️	✔️
Transfer 穿梭框	✔️	✔️
TreeSelect 树型选择控件	✔️
Upload 上传	✔️	✔️
Avatar 头像	✔️	✔️
Badge 徽标数	✔️	✔️
Calendar 日历	✔️	✔️
Card 卡片	✔️	✔️
Carousel 走马灯	✔️	✔️
Collapse 折叠面板	✔️	✔️
Comment 评论	✔️
Descriptions 描述列表	✔️	✔️
Empty 空状态	✔️	✔️
List 列表	✔️
Popover 气泡卡片	✔️	✔️
Statistic 统计数值	✔️
Table 表格	✔️	✔️
Tabs 标签页	✔️	✔️
Timeline 时间线	✔️	✔️
标签 Tag	✔️	✔️
Tooltip 文字提示	✔️	✔️
Tree 树形控件	✔️	✔️
Alert 警告提示	✔️	✔️
Drawer 抽屉	✔️	✔️
Message 全局提示	✔️	✔️
Modal 对话框	✔️	✔️ (Dialog 对话框、MessageBox 弹框)
Notification 通知提醒框	✔️	✔️
Popconfirm 气泡确认框	✔️	✔️
Progress 进度条	✔️	✔️
Result 结果	✔️	✔️
Skeleton 加载占位图/骨架屏	✔️	✔️
Spin 加载中	✔️	✔️(Loading加载)
Anchor 锚点	✔️
BackTop 回到顶部	✔️	✔️
ConfigProvider 全局化配置	✔️
Divider 分割线	✔️	✔️
LocaleProvider 国际化	✔️
Typography 字体		✔️
Border 边框		✔️
ColorPicker 颜色选择器		✔️
Image 图片		✔️
InfiniteScroll 无限滚动		✔️

参考地址：https://tonightleftyou.github.io/2019/07/15/Compare_antD_with_elementUI/index.html

设计理念-非常有道理

在这里插入图片描述

想快速上手，建议用elementUI；
如果追求比较复杂的后台管理平台，可以考虑采用ant-design, 论表格还是表单，都是高度可配置化的。虽然稍微复杂了点，但是换来更大的便利。
参考地址：https://tonightleftyou.github.io/2019/07/15/Compare_antD_with_elementUI/index.html