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 上檢視該專案，兩個倉庫會保持同步更新。

newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-appnewbee-mall in Gitee : https://gitee.com/newbee-ltd/newbee-mall-vue-app如何選擇一個好的 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 的解釋，在開發的過程中能減少很多不必要的麻煩。

相關開源專案：

vuetify-material-dashboard：一個基於 vuetify 設計風格的管理系統。adminify：同樣是一個整合 vuetify 元件庫的開源專案。vue-movie：vuetify + vue 仿豆瓣電影專案。electron-vue-music：electron + vue + vuetify 仿網易雲音樂。

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

Vux

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

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

相關開源專案：

vux2.5-webapp：一個基於 vux 開發的商城專案。vue2-vux-fitness-project：一個基於 vux 開發的種子專案，同學們可以拿這個專案作為啟動專案。vue-music：vux + vue 仿網易雲音樂專案。

總結： 文件好、元件多、還有又拍雲的獨家贊助。但是是個人維護的專案，並且最新的更新時間也是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月份的，版本更新也不是很及時。

相關開源專案：

cube-application-guide：一個快速上手 cube-ui 的教程。

總結： 這裡就不做過多介紹了，也只有滴滴內部的人員會去使用了，畢竟 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 有讚的，畢竟東哥把我們都當作兄弟，他的技術團隊肯定不會坑我們。元件內有幾個特色元件，如數字倒計時、圖片懶載入、視訊、配送時間、轉盤抽獎、簽名、地址選擇等等。說實話，看到轉盤抽獎的時候，我都驚了，京東～真有你的！！

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

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

我曾七次鄙視自己的靈魂:第一次,當它本可進取時，卻故作謙卑；第二次,當它空虛時，用愛慾來填充；第三次,在困難和容易之間，它選擇了容易；第四次,它犯了錯，卻藉由別人也會犯錯來寬慰自己；第五次,它自由軟弱，卻把它認為是生命的堅韌；第六次,當它鄙夷一張醜惡的嘴臉時，卻不知那正是自己面具中的一副；第七次,它側身於生活的汙泥中雖不甘心，卻又畏首畏尾。

原文地址：/file/2020/08/25/20200825005443_1.jpg.html