历经1年零7个月，Element Plus终于发布了官方稳定版本。

下面是一组数据。经过256 个贡献者、2494 个PR 和2635 个提交，Element 开发团队终于发布了Element Plus 的正式版本。

事实上，截至2020年12月，Element Plus的第一个测试版已经发布。开发团队表示，这是基于2020年9月新发布的Vue3.0对Element UI进行的升级和适配。

这个正式版本于今年2 月7 日正式诞生，建立在137 次连续的alpha 和beta 迭代之上。

Element,从何而来？

那么，Element Plus的由来是什么？

这是一个漂亮又实用的组件库。从官网上我们可以看到，这是一个基于Vue3的面向设计者和开发者的桌面组件库。

具体来说，设计者可以直接下载设计文件或直接使用模板，同时快速创建图纸，有效实现前端修复。对于前端开发人员来说，这个组件库可以帮助他们快速构建项目，也让后期维护变得更加简单，节省时间，提高效率。

回想起来，我们发现这个组件库是由饿了么庞大的前端开发团队开发的。早在2016年，饿了么就想打造一个后端站点解决方案，用于中后端产品管理的快速开发，并正在内部开发一套业务组件库。

至此，经过饿了么开发者和设计者的共同努力，Element第一个内部版本于当年4月14日发布。经过4个多月的时间，饿了么这个业务专用组件从Vue1.x迁移到了Vue2。

有时候，转折点悄然来临。 2016年9月3日，JS Conf China（中国开发者大会）云集了国内外JavaScript社区的众多知名开发者，分享了他们对JavaScript的独特见解。与此同时，众多知名嘉宾也参与其中。我们分享了各自的开源项目。几位参与Element开发的开发者也出现在当天的会议上。

一位参与Element开发的前端工程师曾在知乎回忆： “或许是受到当天大会上开源氛围的影响，Element 的开发者也在现场宣布开源并正式推送。从此，Element 就成为了Vue 生态中最受欢迎的之一。” UI组件库非常受开发者的欢迎和喜爱。

2020年9月，饿了么前端开发团队推出了Element Plus首个内测版本。如今，明星组件库也达到了一个新的里程碑。

值得一提的是，Element Plus在Gitee上开源，是Gitee上的GVP项目（Gitee的顶级开源项目）。

开源许可证

麻省理工学院

项目介绍

饿了么前端团队打造的Vue 3.0桌面组件库。

项目地址

https://gitee.com/element-plus/element-plus

Element Plus的变与不变

据官方介绍，Element Plus 采用TypeScript + Vue 3.2 开发，是第一个提供完整的类型定义文档复合API 重构的组件库。随着Vue 3.0正在进行重大版本升级，Element作为生态组件库想要摆脱一些历史包袱，开发团队对Element进行了彻底的重建。也就是说，Element Plus是基于Vue3逐行重写代码创建的。

这里有人疑惑，而且，重写代码后，是否意味着Element已经被开发团队放弃了？这个新项目至今没有受到关注，和已经收集到的Element UI有什么区别？

事实上，Element Plus 重写了代码，因此您仍然可以从那里看到Element UI。两者都在进行自己的维护，但Element Plus 的官方版本提供了一些答案。 \

从框架来看：

Element-UI 适用于Vue2 框架。 Element-Plus适用于Vue3框架。

Element-UI基本不兼容移动版本，但Element-Plus不再兼容IE，并且提高了最低兼容版本。 注意：如果你想在旧版本的浏览器中正常使用Element Plus，请自行使用Babel、ESBuild或其他转换工具并引入相应的polyfill。

Element Plus 还使用ResizeObserver。如果您有兼容性要求，则需要自己实现resize-observer-polyfill。

从配置角度来看：Element Plus 添加了新的全局配置管理组件config-provider 来替代Element UI 中的全局配置Vue.prototype.$ELEMENT。

全局配置有两种方式：

元素用户界面：

`template` el-button type='primary' icon='el-icon-search'Search/el-button `/template` 元素加上：

script setup lang='ts'import { Search } from '@element-plus/icons'/scripttemplate el-button type='primary' :icon='Search'Search/el-button/template 从设计角度来看：

1. 此前，组件尺寸系统主要由default/medium/small/mini组成。然后在默认的基础上切换到更自然的大/默认/小。如果需要增加，选择大；如果需要减少，选择小。

2. Vue3 引入了一些API 调整，因此升级您的Element 项目将不可避免地需要进行一些更改。在现有组件迁移的基础上，正式版增加了四个新组件来丰富开发者的选择：Space、Skeleton、Empty、Affix。同时，Element Plus还添加了Select-V2组件，该组件使用虚拟滚动来优化长列表的显示性能。

3. Element Plus 创建并上传了更新的Figma 设计资源文件，其中包含所有组件信息，以方便产品经理和设计师使用。

最后请注意，目前正式版的发布仅意味着整体迁移适配工作的结束。 API 设计从根本上来说是稳定的，但还不止于此。例如，2020年发布测试版时，官方表示将为表提供虚拟化功能，以优化表组件在大数据量情况下的性能。不过，本次正式版发布尚未包含这部分功能。官方表示该功能将在未来版本中添加。

Element Plus 正式版的到来引起了广泛关注，但事实证明这仅仅是一个开始。

版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。