Element UI for Vue 3.0 來了！【官方總結(jié)】

? Element UI for Vue 3.0 來了！

第一個(gè)使用 TypeScript + Vue 3.0 Composition API 重構(gòu)的組件庫 Element Plus 發(fā)布了 ? ~

2016 年 3 月 13 日 Element 悄然誕生，經(jīng)歷了 4 年的風(fēng)雨洗禮，我們從一個(gè)餓了么內(nèi)部業(yè)務(wù)組件庫成長為 Vue 生態(tài)里最流行的 UI 組件庫之一。

截至本文撰寫時(shí)，Element 已獲得 48200 Github Star， NPM 下載量 95 萬次/每月的可喜成績。感謝超過 530 名社區(qū)貢獻(xiàn)者的參與維護(hù)，和我們一同完成了 4400 次 commit 的更新迭代。

來張作者原始頭像做對(duì)比，體現(xiàn)為之付出而犧牲的滄桑

開源前

開源后

Element 開發(fā)團(tuán)隊(duì) 40000 Github Star 慶祝會(huì)

Element Plus for Vue 3.0

2020 年，隨著 Vue 3.0 不斷完善和發(fā)布，我們也緊張投入到 Element 對(duì) Vue 3.0 的升級(jí)適配工作中。歷經(jīng) 6 個(gè)月共計(jì) 23 個(gè) alpha 版本的迭代，終于，在今天， Element Plus for Vue 3.0 Beta 版本正式發(fā)布 ? ！

Vue 3.0 的大版本升級(jí)，對(duì)生態(tài)組件庫來說也是一次丟掉歷史包袱前行的好機(jī)會(huì)，我們大刀闊斧對(duì) Element 進(jìn)行了一次深度重構(gòu)。

Element Plus for Vue 3.0 是一個(gè)使用 TypeScript + Composition API 重構(gòu)的全新項(xiàng)目。

我們幾乎重寫了每一行 Element 的代碼，用最 Vue 3 的方式呈現(xiàn)了最完美的 Element，主要有：

• 使用 TypeScript 開發(fā)，提供完整的類型定義文件
• 使用 Vue 3.0 Composition API 降低耦合，簡化邏輯
• 使用 Vue 3.0 Teleport 新特性重構(gòu)掛載類組件
• 使用 Lerna 維護(hù)和管理項(xiàng)目
• 使用更輕量更通用的時(shí)間日期解決方案 Day.js
• 升級(jí)適配 popperjs, async-validator 等核心依賴
• 完善 52 種國際化語言支持

除此以外，還有：

• 全新的視覺*
• 優(yōu)化的組件 API
• 更多自定義選項(xiàng)
• 更加詳盡友好的文檔

Q：Element Plus 和 Element UI 是什么關(guān)系? 為什么又一個(gè)新項(xiàng)目？

正如 vue-next 之于 vue，一次 100% 的重構(gòu)雖然解決了很多歷史遺留問題，但也不可避免的引入一些新的 bug 和問題，而獨(dú)立的 issue 和 pr 區(qū)可以減少大家使用和反饋的心智成本，也能更加方便我們定位問題，并行維護(hù)迭代。

Element will stay with Vue 2.x

For Vue 3.0, we recommend using Element Plus from the same team

具體可以參考 Element 的 README github.com/ElemeFE/ele…

Q: 老 Element 項(xiàng)目可以平滑升級(jí)到 Vue 3.0 + Element Plus 嗎？

由于 Vue 3.0 升級(jí)引入了部分 API 的調(diào)整，老項(xiàng)目的升級(jí)不可避免的要做些許改動(dòng)。但我們力爭把變更內(nèi)容做到可控，只需要很少的調(diào)整就能完成項(xiàng)目升級(jí)。在今后 Vue 3.0 的項(xiàng)目里，還是熟悉的 Element 的配方和味道。

Q: Element UI 還會(huì)維護(hù)嗎？

當(dāng)然會(huì)！(而且一直在正常迭代發(fā)布呀 ヽ(??▽?)ノ)

每每看到社區(qū)類似的擔(dān)憂，對(duì)我們都是一種鞭策。作為一個(gè)負(fù)責(zé)任的開源項(xiàng)目，必然不會(huì)辜負(fù)大家的期待。隨著用戶的增多，肩上的壓力也越來越大，希望大家使用了 Element 能真正為項(xiàng)目開發(fā)減負(fù)提效，這樣我們多加班，大家早下班，想到這，感覺胸前的紅領(lǐng)巾更鮮艷了?。

開始體驗(yàn)吧

有很多方式可以體驗(yàn) Element Plus for Vue 3.0

• 手動(dòng)安裝 npm install element-plus ，詳見官網(wǎng)安裝指南

?>https://element-plus.org/#/zh-CN/component/installation

• 下載 Webpack 腳手架 直接運(yùn)行體驗(yàn)

?>https://github.com/element-plus/element-plus-starter

• ? 嘗鮮時(shí)下最炫酷的Vite 打包腳手架

?>https://github.com/element-plus/element-plus-vite-starter

• 通過 Vue CLI 插件 引入

?>https://github.com/element-plus/vue-cli-plugin-element-plus

Element Plus的下一步是什么？

• 一次重大視覺更新
• 2 個(gè)全新組件緊張研發(fā)中
• 訪問速度更快，功能更強(qiáng)大的官方網(wǎng)站

喜歡 Element Plus 嗎？來點(diǎn)個(gè) Star ?? 支持鼓勵(lì)我們一下吧 ~

原文:juejin.cn/user/3315782798806430/posts

1.如果看到這里，說明你喜歡這篇文章，請?轉(zhuǎn)發(fā)、點(diǎn)贊、在看

2.關(guān)注公眾號(hào)前端人，回復(fù)資料包領(lǐng)取我整理的前端進(jìn)階資料包

3.回復(fù)加群，加入前端進(jìn)階群，和小伙伴一起學(xué)習(xí)討論!