ElementUI 不維護了？供我們選擇的 Vue 元件庫還有很多！

我是13發表於2020-08-24
UIVue元件

前文回顧：Vue+Spring Boot 前後端分離的商城專案開源啦！

Vue 元件千千萬，只要不行我們就換。

ElementUI 近況

根據我最近的觀察，得知一些關於 ElementUI 維護人員都退去的訊息，這意味著什麼？意味著已經學不動的我們，不用再去學新東西了，開不開心？意不意外？

說正經的，這意味著後期 ElementUI 可能無人維護，就算 Vue3.0 正式版出來 ，ElementUI 的程式碼也將不會被迭代。從下面的圖片中我們也可以看到，最新的一次更新在今年的 5月18日，Github 上 46k+ ⭐ 的專案，整整三個月沒有迭代更新了。

這裡放幾個知乎連結：

element-ui 是不是不維護了

如果 ElementUI 不維護了，也不再支援 Vue 3了我們該怎麼辦呢？

仔細翻閱上述知乎回答，有些比較閒的作者已經 fork 了 ElementUI 的原始碼，自己改造適配 Vue3，在此我只能說兩個字：敬佩。

那麼面對這樣的情況，作為前端開發的我們應該如何將損失降到最低呢？

我的答案是：可以換 UI 元件庫的話儘量早點換，避免後期因為框架的問題沒能解決而坑了專案，僅代表個人觀點。

如上圖所示，我最近開源的 Vue 版的新蜂商城專案選擇的元件庫是 Vant，不出意外應該會持續更新，這樣就少了一些困擾。

newbee-mall 在 GitHub 和國內的碼雲都建立了程式碼倉庫，如果有人訪問 GitHub 比較慢的話，建議在 Gitee 上檢視該專案，兩個倉庫會保持同步更新。

如何選擇一個好的 UI 框架作為專案的元件庫

  • ?好看

    先拋開大不大廠不說，中小廠為了加快開發效率，可能不會對 UI 元件庫的樣式做太多的改動，這就要求 UI 元件庫本身就要自帶顏值✨。

  • ?大廠加持

    先不說大廠要有多大吧，起碼要有獨立的團隊去維護元件庫，若是桃園三結義一般因為某些意氣用事，要搞一個元件庫，最後公司賣給某寶，撒手框架不管，這就比較尷尬。

  • ?好的生態

    什麼是生態，就是圍繞著這個框架的周邊設施是否齊全。比方說 Github 上的 Issue 是否能快速給予提問者反饋，是否有論壇社群等網站讓使用者可以貢獻自己的二次開發的元件（物料庫），開源作品多不多，文件寫得好不好（特別是中文文件）等等，都將決定這個元件庫的發展好壞與否。

以上排名不分先後，每一條都很重要，請根據自己公司業務的實際情況，酌情選擇。

市面上現有的元件庫分析

說到元件庫，React 我先不提了，因為統一標配 Ant Design。

Vue 的元件庫可謂是百花齊放、琳琅滿目、選不過來，下面我按照個人印象給大家評價一下市面上這些有人用的 Vue 元件庫。

以下介紹順序，分先後，按照 Github 的⭐⭐數。

ElementUI

?作者：餓了麼團隊（現已被阿里收購）
⭐Github star：46.8k+
?屬性：PC 端元件庫

簡介： 內涵 55+ 個網頁開發常用元件，並且元件庫結合了 vue-cli 出了相應的外掛 Element 外掛，你可以用它們快速地搭建一個基於 Element 的專案。引入方式也支援了按需引入，以達到減小專案體積的目的。在主題方面，官方自己提供了一些，並且可以上傳自定義主題。

?相關開源專案：

  • vue-element-admin：一款基於 ElementUI 二次開發的後臺開源專案。
  • vue-manage-system：基於 Vue + Element UI 的後臺管理系統解決方案。
  • vue2-element-touzi-admin：基於 Vue2.0 + vuex + ElementUI 後臺管理系統。
  • element3：慕課網講師蝸牛老師個人維護的一個 ElementUI + Vue3.0 版本，當然現在可能就是 beta 版本的 Vue3.0。自己平時做專案拿來把玩可以，但是用於公司生產環境需要三思。

?總結： 從這幾個比較好的開源專案型別可以看出，ElementUI 多數用於後臺管理系統的頁面開發，業務元件也多用於資料的處理以及表格表單的展示，但是還是那句話沒人維護了，要是用的同學請慎重考慮一下後面要更新的 Vue3.0。

Vuetify

?作者：John Leider、Heather Leider、Kael Watts-Deuchar 等，一群國外開發大佬，詳情可以點選上面的 Github 地址檢視。
⭐Github star：27k+
?屬性：PC 端元件庫

簡介： Vuetify 是 Vue.js 的頭號元件庫，自 2016 年以來一直在積極開發。這點可以說相當優秀，從他們的官方文件上整齊的廣告可以看出，該元件庫受到廣大甲方的一致好評，紛紛投來廣告。在生態上做的也相當到位，甚至還有付費的主題。相應元件的文件也非常詳細，有用例和 API 的解釋，在開發的過程中能減少很多不必要的麻煩。

?相關開源專案：

?總結： 難道是我的錯覺嗎？國內的小夥伴們都非常愛國，這個元件庫在 Github 幾乎找不到什麼好的開源專案，不相容 Edge 和 IE 瀏覽器讓它在我們國內可能不是很吃香。若是公司有對 IE 的支援需求，選它的時候要三思而後行。

Vux

?作者：airyland 等個人維護專案
⭐Github star：17.2k+
?屬性：Mobile 元件庫、基於WeUI

簡介： 我很欣慰國內有這樣優秀的個人開發能開發出這樣不錯的元件庫，集結了一些有志之士一起維護著這個看著並不怎麼驚豔的開源專案。作者在官方文件下方就直說了：“體驗不佳，維護靠個人。“ 我再看了看主要貢獻者的 Github 活躍程度，以及近期的 Issues 解決情況，我敢斷言，這個框架只要作者還健在，應該不會歇菜。特別是微信 H5 開發的朋友，這款元件庫的 UI 是基於微信官方樣式設計的，十分貼合，建議使用。

?相關開源專案：

?總結： 文件好、元件多、還有又拍雲的獨家贊助。但是是個人維護的專案，並且最新的更新時間也是2019年4月份（感謝評論的小夥伴提出建議），不是很推薦使用。

Vant

?作者：有贊技術團隊
⭐Github star：14.6k+
?屬性：Mobile 元件庫

簡介： Vant 是一個移動端元件庫，支援 TS、SSR、按需引入、國際化等等，最重要的是它還支援小程式。官方文件支援中英文，並且文件對開發者也是非常友好，有用例和展示效果。元件豐富，因為有贊團隊是做商城類的，所以 Vant 支援了一些商城的特色元件，如位址列、省市區、商品卡片、優惠券、提交訂單、商品規格等等。

?相關開源專案：

  • vant-demo：Vant 官方示例合集，包含了 Vant、Vant Weapp 和 Vant Cli 相關的示例，詳細內容請開啟各目錄檢視。

  • vant-weapp：Vant Weapp 是移動端 Vue 元件庫 Vant 的小程式版本，兩者基於相同的視覺規範，提供一致的 API 介面，助力開發者快速搭建小程式應用。

?總結： 看了以下 Github 的 Issue，最近一次更新在前幾天，說明框架一直在維護中。有贊目前已經上市，公司內部都是使用 Vant 進行開發，所以開發者們不必擔心這個元件庫不再被維護，相信 Vue3 出來之後，團隊也會對元件庫做升級處理。

Ant-design-vue

?作者：唐金州
⭐Github star：11.3k+
?屬性：PC 元件庫

簡介： 這裡是 Ant Design 的 Vue 實現，開發和服務於企業級後臺產品。加了 ant 貌似是螞蟻金服開發的，其實是個人按照 ant-design 做了一對一的臨摹。

?相關開源專案：

  • ant-design-vue-pro：基於 Ant Design of Vue 實現的 Ant Design Pro。
  • vue-alain：使用 Vue-cli 3.0、TypeScript、ant-design-vue 實現的中後臺框架。
  • k-form-design：基於 Vue 和 ant-design-vue 實現的表單設計器。

?總結： ant-design-vue 也算是國內個人開發者裡，臨摹比較成功的案例，乘著螞蟻金服這波流量，迅速漲星星。元件還算看得過去，問題也更新的挺及時的，中規中矩的一個元件庫，可用。

Cube-UI

?作者：滴滴團隊
⭐Github star：8.3k+
?屬性：Mobile 元件庫

簡介： 從官方文件一眼就看出它是滴滴團隊開發維護的，元件數量不是很多，沒有什麼特色，最新版本居然是今年4月份的，版本更新也不是很及時。

?相關開源專案：

?總結： 這裡就不做過多介紹了，也只有滴滴內部的人員會去使用了，畢竟 Vue 移動端元件那麼多，我為什麼要選一個又醜維護又不及時的元件庫呢，再見?。

Mand-Mobile

?作者：滴滴團隊
⭐Github star：2.7k+
?屬性：Mobile 元件庫

簡介： Mand Mobile 是面向金融場景設計的移動端元件庫，基於Vue.js實現。目前已實際應用於滴滴四大金融業務板塊的10餘款產品中。40+ 的實用元件，滿足基本的業務需求。

?相關開源專案：

  • palette：mand-mobile 的視覺主題編輯器。

?總結： 這個移動端元件就非常有特點了，就好像 Vant 針對的是電商，Mand 針對的是金融業務。內部有豐富的金融業務相關的元件，如金融數字、票據、驗證碼、收銀臺、折線表、刻度尺、數字鍵盤等等。要是你的公司是做金融業務的，可以嘗試使用這套元件庫。

NutUI

?作者：京東團隊
⭐Github star：2.2k+
?屬性：Mobile 元件庫

簡介： 2020 年初新出的一個船新元件庫。NutUI 是一套京東風格的移動端元件庫，開發和服務於移動 Web 介面的企業級產品。50+ 高質量元件，40+ 京東移動端專案正在使用。

?相關開源專案：

  • nutui-demo：基於 Vue CLI 搭建 NutUI 的相關示例專案。

?總結： 剛剛出來，開源專案不是很多，京東這個元件庫要是做得好的話，可能會超過 Vant 有讚的，畢竟東哥把我們都當作兄弟，他的技術團隊肯定不會坑我們。元件內有幾個特色元件，如數字倒數計時、圖片懶載入、視訊、配送時間、轉盤抽獎、簽名、地址選擇等等。說實話，看到轉盤抽獎的時候，我都驚了，京東～真有你的！！

還有很多很多默默無聞的個體戶，用心的維護著自己的元件庫，在這就不一一拿出來介紹了，因為真的很多！！！也希望大家也可以在評論區暢所欲言，說說你們喜歡的元件庫，感謝大家的觀看。

除註明轉載/出處外，皆為作者原創，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連結，否則保留追究法律責任的權利。

相關文章