基于目前国内Web前端应用于后台系统的场景，有了一个对前端主流后台 UI 框架知识系统梳理的方法。这个系列文章的核心点是比较，这个灵感来自于比较政治学，旨在通过比较来加深对 UI 框架知识的理解。
概述
Element Plus 与 Ant Design 分别是饿了么团队与阿里巴巴团队在开发维护，技术选型上分别是 Vue 与 React。市场上大量的后台系统都是使用它们开发的。
在本系列的文章中，我们使用最新版的 Element Plus 与 Ant 来进行比较，比较的重点在于组件的参数与职责。希望通过比较这两个知名的 UI 框架来了解后台系统在开发中用到的组件。
本系列文章试图抽象出 Element Plus 与 Ant 组件中共有的属性和方法，希望做到先了解了某一个框架的前提下能以此做为基准快速了解另一个框架。
Element Plus
Element Plus 的前身是 Element UI，它的前身开源的时间为2016年9月；Element Plus 的开源时间是2020年12月，它是基于 Vue3 开发，官方并没有 React 版本。
Ant Design
Ant Design 开源的时间为2015年7月，它是基于 React 开发，官方并没有 Vue 版本。
我们要比较什么 ？
生物学上有塑料人体的模型，地理学上有天气预测模型，心理学、经济学、物理学也都有各自的模型。模型的好处是它把问题简化后，能更清晰的呈现给我们重点内容。我们在两大框架的比较过程中，也把它们简化成了一个模型，这个模型由以下章节组成：
- 通用
- Button 按钮
- FloatButton 悬浮按钮
- Icon 图标
- Typography 排版
- 布局
- Divider 分隔线
- Flex 弹性布局
- Grid 栅格
- Layout 布局
- Space 间距
- Splitter 分隔面板
- 导航
- Anchor 锚点
- Breadcrumb 面包屑
- Dropdown 下拉菜单
- Menu 导航菜单
- Pagination 分页
- Steps 步骤条
- Tabs 标签页
- 数据录入
- AutoComplete 自动完成
- Cascader 级联选择
- Checkbox 多选框
- ColorPicker 颜色选择器
- DatePicker 日期选择期
- Form 表单
- Input 输入框
- InputNumber 数字输入框
- Mentions 提及
- Radio 单选框
- Rate 评分
- Select 选择器
- Slider 滑动输入条
- Switch 开关
- TimePicker 时间选择器
- Transfer 穿梭框
- TreeSelect 树选择
- Upload 上传
- 数据展示
- Avatar 头像
- Badge 徽标数
- Calendar 日历
- Card 卡片
- Carousel 走马灯
- Collapse 折叠面板
- Descriptions 描述列表
- Empty 空状态
- Image 图片
- List 列表
- Popover 气泡卡片
- QRCode 二维码
- Segmented 分段控制器
- Statistic 统计数值
- Table 表格
- Tag 标签
- Timeline 时间轴
- Tooltip 文字提示
- Tour 漫游式引导
- Tree 树形控件
- 反馈
- Alert 警告提示
- Drawer 抽屉
- Message 全局提示
- Modal 对话框
- Notification 通知提醒框
- Popconfirm 气泡确认框
- Progress 进度条
- Result 结果
- Skeleton 骨架屏
- Spin 加载中
- Watermark 水印
- 其他
- Affix 固钉
- App 包裹组件
- ConfigProvider 全局化配置
- Util 工具类
在本系列的文章中，我们将围绕这七部分内容来进行更进一步的比较。后续发布的每一篇文章都会至少涉及到两大框架中的一个组件，围绕这个知识点会列出两大框架的理念与实现方法。所以如果你只熟悉其中某一个框架，可以以此框架的知识为基点去参考其他框架的设计理念以加深对这个知识点的理解。
由于本人时间与能力有限，在对这两个框架比较的文章会有遗漏、错误等各方面的问题，还望看到的同行们在评论区及时提出，并请多多包涵！如果发布的文章对您有那么一点点的帮助，那将是我最大的荣幸！
参考链接：
发表回复