1.2　簡單認識Element與Element Plus

在沒有UI框架以前，前端開發者總是在頁面排版布局和美化方面花費大量的時間，不同的項目，很多UI元素具有相同或相似的特性，比如一個簡單的按鈕可能僅僅是顏色不同，可能有的按鈕帶有圖標，有的只是文字，彼時未將這樣相似的特性提取封裝成組件，開發者只能自己調整樣式、美化頁面，因而大量的開發者其實寫著相同的代碼，做著重復的工作。而UI框架的誕生順應趨勢，將這些重復的工作通過封裝達到了統一，節省了編寫大量樣式的時間，大大地提高了前端開發的效率，同時UI框架在設計上具有統一的風格，一個沒有設計師的團隊也可以通過使用UI框架來快速做出簡易版本的頁面。

Element和Element Plus就是非常優秀的UI框架，它們是由餓了么公司前端團隊開源維護的桌面端組件庫。開發者可以使用這兩個框架快速搭建一個網站，設計師使用這兩個框架提供的設計資源可以快速設計出風格統一的頁面，產品經理也可以使用這兩個框架提供的設計資源快速繪制出產品原型。

Element基于Vue 2.x，Element Plus是Element的升級版本，是為適配Vue的升級版本Vue 3.x而對Element UI使用TypeScript+組合式API進行重構后產生的前端組件庫。

它們是當前和Vue配合做項目開發比較好的UI框架，提煉出了一套基于template的直觀、易用的方法，使得其在GitHub上非常火爆，在社區出現了很多個人修改版的Element。它們有幾個重要特點：

（1）官網提供了優秀的開發文檔，開發者很容易學習和使用。

Element和Element Plus的文檔都由官方維護，其文檔結構清晰，使用方法和使用示例源碼一同出現，易于學習和理解。文檔通常在列舉常用示例之后，再列舉組件提供的所有屬性、事件和方法等，開發者可以詳細閱讀文檔，對比自己的業務需求來尋找合適的組件。

（2）它們有豐富的組件，可以滿足大多數PC端to B業務的開發需求。

從官網文檔組件列表中可以了解到：

Element UI有60個組件，包含基礎組件、Form表單組件、數據組件、導航組件、消息組件和其他組件6大類，其中基礎組件包括按鈕、鏈接、布局等在內的8個，表單組件包括輸入框、單選框、多選框、滑塊、開關、時間選擇器等在內的16個，數據組件包括表格、分頁組件在內的11個，導航組件包括菜單、標簽頁、步驟條在內的6個，消息組件包括消息提示、消息彈框、通知組件在內的5個，其他組件包括對話框、抽屜在內的14個。

Element Plus有67個組件，包含基礎組件、配置組件、Form表單組件、數據組件、導航組件、反饋組件和其他組件7大類，其中已經包含Element的所有組件，并對原來的一些消息組件和其他組件做了重新歸類。比如，原來在Element中的對話框組件、抽屜組件歸類到了反饋組件中，還新增了7個組件，分別是基礎組件Scrollbar（滾動條，這個組件其實在Element中已經有了，但未在文檔中開放）與Space（間距）、配置組件Config Provider（全局化配置）、表單組件Virtualized Select（虛擬化選擇器）和數據組件Time Select（時間選擇）、數據組件Virtualized Tree（虛擬化樹形控件）以及導航組件Affix（固釘），有興趣了解這些組件的讀者可以到官網查看詳細文檔。

（3）它們有一個成熟的生態。

餓了么是在國內做Vue的UI框架中最早的一家，用戶群體非常多，遇到問題基本都能夠解決。同時它們支持自定義主題，可以滿足不同主題風格的需求。

Element和Element Plus框架默認提供一套theme-chalk主題，Element用戶可以使用官網提供的在線主題編輯器更換主題色彩，實時預覽主題更改后的效果；Element Plus用戶可以參照官網提供的自定義主題的示例，修改所有全局和組件的樣式。