1.2　简单认识Element与Element Plus

在没有UI框架以前，前端开发者总是在页面排版布局和美化方面花费大量的时间，不同的项目，很多UI元素具有相同或相似的特性，比如一个简单的按钮可能仅仅是颜色不同，可能有的按钮带有图标，有的只是文字，彼时未将这样相似的特性提取封装成组件，开发者只能自己调整样式、美化页面，因而大量的开发者其实写着相同的代码，做着重复的工作。而UI框架的诞生顺应趋势，将这些重复的工作通过封装达到了统一，节省了编写大量样式的时间，大大地提高了前端开发的效率，同时UI框架在设计上具有统一的风格，一个没有设计师的团队也可以通过使用UI框架来快速做出简易版本的页面。

Element和Element Plus就是非常优秀的UI框架，它们是由饿了么公司前端团队开源维护的桌面端组件库。开发者可以使用这两个框架快速搭建一个网站，设计师使用这两个框架提供的设计资源可以快速设计出风格统一的页面，产品经理也可以使用这两个框架提供的设计资源快速绘制出产品原型。

Element基于Vue 2.x，Element Plus是Element的升级版本，是为适配Vue的升级版本Vue 3.x而对Element UI使用TypeScript+组合式API进行重构后产生的前端组件库。

它们是当前和Vue配合做项目开发比较好的UI框架，提炼出了一套基于template的直观、易用的方法，使得其在GitHub上非常火爆，在社区出现了很多个人修改版的Element。它们有几个重要特点：

（1）官网提供了优秀的开发文档，开发者很容易学习和使用。

Element和Element Plus的文档都由官方维护，其文档结构清晰，使用方法和使用示例源码一同出现，易于学习和理解。文档通常在列举常用示例之后，再列举组件提供的所有属性、事件和方法等，开发者可以详细阅读文档，对比自己的业务需求来寻找合适的组件。

（2）它们有丰富的组件，可以满足大多数PC端to B业务的开发需求。

从官网文档组件列表中可以了解到：

Element UI有60个组件，包含基础组件、Form表单组件、数据组件、导航组件、消息组件和其他组件6大类，其中基础组件包括按钮、链接、布局等在内的8个，表单组件包括输入框、单选框、多选框、滑块、开关、时间选择器等在内的16个，数据组件包括表格、分页组件在内的11个，导航组件包括菜单、标签页、步骤条在内的6个，消息组件包括消息提示、消息弹框、通知组件在内的5个，其他组件包括对话框、抽屉在内的14个。

Element Plus有67个组件，包含基础组件、配置组件、Form表单组件、数据组件、导航组件、反馈组件和其他组件7大类，其中已经包含Element的所有组件，并对原来的一些消息组件和其他组件做了重新归类。比如，原来在Element中的对话框组件、抽屉组件归类到了反馈组件中，还新增了7个组件，分别是基础组件Scrollbar（滚动条，这个组件其实在Element中已经有了，但未在文档中开放）与Space（间距）、配置组件Config Provider（全局化配置）、表单组件Virtualized Select（虚拟化选择器）和数据组件Time Select（时间选择）、数据组件Virtualized Tree（虚拟化树形控件）以及导航组件Affix（固钉），有兴趣了解这些组件的读者可以到官网查看详细文档。

（3）它们有一个成熟的生态。

饿了么是在国内做Vue的UI框架中最早的一家，用户群体非常多，遇到问题基本都能够解决。同时它们支持自定义主题，可以满足不同主题风格的需求。

Element和Element Plus框架默认提供一套theme-chalk主题，Element用户可以使用官网提供的在线主题编辑器更换主题色彩，实时预览主题更改后的效果；Element Plus用户可以参照官网提供的自定义主题的示例，修改所有全局和组件的样式。