关于vue.js:Element-Plus-正式版发布啦🎉🎉

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

重大更新

TypeScript 与 Vue 3

Element Plus 应用 TypeScript 与 Vue 3.2 开发，提供残缺的类型定义文件。并应用 Composition API 升高耦合，简化逻辑。

兼容性

因为 Vue 3 不再兼容 IE，所以 Element Plus 也进步了最低兼容的版本。

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

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 批改阐明。

图标

为了应用 Element Plus 内置的图标，用户往往须要援用一个 ~75KB 的字体文件，以及 1 个额定的网络申请，这个在大多数状况下属于齐全不须要的开销，对体积以及首页加载速度很在意的用户来说，这属于是一个短暂的痛点。

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

您能够下载旧版本的字体文件来让老我的项目放弃兼容。

• unpkg.com/element-plus@1.1.0-beta.24/theme-chalk/base.css
• unpkg.com/browse/element-plus@1.1.0-beta.24/theme-chalk/fonts

配置

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
<template>
  <el-config-provider :size="small">
    <el-button>Button</el-button>
  </el-config-provider>
</template>

如需理解更多 API 变动细节，请参阅 Element Plus 不兼容变动和降级指南。

新组件和设计资源

在迁徙完现有组件的根底上，正式版本中减少了 Space, Skeleton, Empty 和 Affix 四个全新组件丰盛开发者的抉择。以及减少了应用虚构滚动的 Select-V2 组件来优化长列表的展现性能问题。

同时咱们也制作上传了蕴含所有组件信息的最新 Figma 设计资源 文件，不便产品经理和设计师的应用。

正式版的公布意味着整体迁徙适配工作的完结，API 设计根本稳固，但这只是一个开始。在后续的迭代工作中，咱们将集中精力在优化交互细节，新增额定性能上，包含但不仅限以下内容：

暗色主题

正式版中，咱们集成了 CSS Variables 的全新能力，这将比之前的 SASS 变量配置模式更不便且性能更好。在这套能力的根底上，咱们正在缓和开发暗色主题，很快会在后续版本中与大家见面。

高性能表格组件

在 Beta 公布的时候，咱们提到过提供应用虚拟化能力的表格，来优化大数据量状况下的 Table 组件性能。但本次的正式版公布暂未蕴含这部分性能，而会在后续的迭代中退出。始终没有把这个性能落地下来有很大一部分起因是，咱们始终在摸索到底哪一种形式是更加适宜用户的。是咱们间接退出虚拟化的表格渲染引擎，亦或是咱们提供渲染接口让用户本人增加虚拟化的组件（相似 vue-virtual-scroller 这样的组件）来自行渲染。后续咱们会参考联合当初市面上相干组件的实现，提供一套解决方案，让 Element Plus 的 Table 组件更加好用。

相干生态

• Element Plus Icons – Element Plus 图标汇合。
• Element Plus Playground – 您能够点击此处尝试！ 😆
• Element Plus Vite Starter – Vite 疾速上手模板。
• unplugin-element-plus – Element Plus 按需加载款式插件。
• Design Materials – Element Plus 社区的 Logo、表情包与其余资源。
• awesome-element-plus – Element Plus 相干库、模板与资源的列表。