Vue3 经典UI框架「Element Plus 」正式版发布啦

本文经作者@iamkun 授权转载

链接：https://juejin.cn/post/7061850934095609863

---

今天，我们非常高兴地宣布 Element Plus 稳定版正式发布。自第一个 commit 起，经过 1 年零 7 个月的持续迭代开发，总计 2635 commits，经过 256 位贡献者所提交的 2494 个 PR，137 个 Alpha 与 Beta 版本，在社区每一位同学的参与帮助下，Element Plus 的第一个正式版终于和大家见面。

1重大更新

TypeScript 与 Vue 3

Element Plus 使用 TypeScript 与 Vue 3.2 开发，提供完整的类型定义文件。并使用 Composition API 降低耦合，简化逻辑。

兼容性

由于 Vue 3 不再兼容 IE，所以 Element Plus 也提高了最低兼容的版本。

Edge ≥ 79	Firefox ≥ 78	Chrome ≥ 64	Safari ≥ 12

如果想在低版本浏览器上正常使用 Element Plus，请自行使用 Babel、ESBuild 或其他转换工具，并引入相应的 polyfill。值得注意的是，Element Plus 使用到了 ResizeObserver，如有兼容性需求需要您自行引入 resize-observer-polyfill^[1]。详情请参阅 ResizeObserver 的兼容性^[2]。

ESM 与 CJS

Element Plus 同时支持 ESM、CJS 与 UMD 格式。一般情况下无需留意导入的格式，构建工具会自动匹配并转换成目标格式，同时无需额外配置，自身支持按需加载能力。

设计

组件大小体系由 default/medium/small/mini 切换为更自然的 large/default/small，以 default 为基础，需要加大则选择 large，需要缩小则选择 small。

padding 方面则优化为更通用的 4px 体系，采用 4/8 px 作为原子单位控制整个系统的 padding 一致性。即大组件 padding 也大，小组件 padding 也小。具体细节请参阅 size 修改说明^[3]。

图标

为了使用 Element Plus 内置的图标，用户往往需要引用一个 ~75KB 的字体文件，以及 1 个额外的网络请求，这个在大多数情况下属于完全不需要的开销，对体积以及首页加载速度很在意的用户来说，这属于是一个长久的痛点。

因此我们把所有的 Font Icon 都改为了 Inline Vue SVG 组件^[4]，也就是说所有的组件都是跟随你的打包代码一起放在同一个请求内，这样就不会产生额外的网络请求去请求字体文件，也不会带来网络请求失败导致字体渲染不出来的小方块，并且图标的清晰度也会更好。

您可以下载旧版本的字体文件来让老项目保持兼容。

• unpkg.com/element-plu…^[5]
• unpkg.com/browse/elem…^[6]

配置

Element Plus 新增了一个全局配置管理的组件 config-provider，以替代 Element UI 的全局配置 Vue.prototype.$ELEMENT。您可以通过以下两种方式来进行全局配置。

// 方式一 main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')

// 方式二 APP.vue