大家好，我是若川。祝大家新年快樂，開工大吉。公眾號回復「紅包」可以領取源碼共讀紅包封面。

持續組織了6個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。

本文經作者@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
<template><el-config-provider?:size="small"><el-button>Button</el-button></el-config-provider>
</template>

如需了解更多 API 變動細節，請參閱 Element Plus 不兼容變化和升級指南^[7]。

新組件和設計資源

在遷移完現有組件的基礎上，正式版本中增加了 Space, Skeleton, Empty 和 Affix 四個全新組件豐富開發者的選擇。以及增加了使用虛擬滾動的 Select-V2 組件來優化長列表的展示性能問題。

同時我們也制作上傳了包含所有組件信息的最新 Figma 設計資源^[8] 文件，方便產品經理和設計師的使用。

正式版的發布意味著整體遷移適配工作的結束，API 設計基本穩定，但這只是一個開始。在后續的迭代工作中，我們將集中精力在優化交互細節，新增額外功能上，包括但不僅限以下內容：

暗色主題

正式版中，我們集成了 CSS Variables 的全新能力，這將比之前的 SASS 變量配置模式更方便且性能更好。在這套能力的基礎上，我們正在緊張開發暗色主題，很快會在后續版本中與大家見面。

高性能表格組件

在 Beta 發布的時候，我們提到過提供使用虛擬化能力的表格，來優化大數據量情況下的 Table 組件性能。但本次的正式版發布暫未包含這部分功能，而會在后續的迭代中加入。一直沒有把這個功能落地下來有很大一部分原因是，我們一直在探索到底哪一種方式是更加適合用戶的。是我們直接加入虛擬化的表格渲染引擎，亦或是我們提供渲染接口讓用戶自己添加虛擬化的組件（類似 vue-virtual-scroller 這樣的組件）來自行渲染。后續我們會參考結合現在市面上相關組件的實現，提供一套解決方案，讓 Element Plus 的 Table 組件更加好用。

2相關生態

• Element Plus Icons^[9] - Element Plus 圖標集合。

• Element Plus Playground^[10] - 您可以點擊此處^[11]嘗試！😆

• Element Plus Vite Starter^[12] - Vite 快速上手模板。

• unplugin-element-plus^[13] - Element Plus 按需加載樣式插件。

• Design Materials^[14] - Element Plus 社區的 Logo、表情包與其他資源。

• awesome-element-plus^[15] - Element Plus 相關庫、模板與資源的列表。

可點擊閱讀原文查看更多參考資料

[1]

https://www.npmjs.com/package/resize-observer-polyfill

---

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持～