Element Plus 正式版釋出啦！??

朱昆iamkun_com發表於2022-02-07

今天，我們非常高興地宣佈 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 也提高了最低相容的版本。


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

如果想在低版本瀏覽器上正常使用 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 元件，也就是說所有的元件都是跟隨你的打包程式碼一起放在同一個請求內，這樣就不會產生額外的網路請求去請求字型檔案，也不會帶來網路請求失敗導致字型渲染不出來的小方塊，並且圖示的清晰度也會更好。

您可以下載舊版本的字型檔案來讓老專案保持相容。

配置

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 元件更加好用。