Vue 組件庫

前文回顧：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 上查看該項目，兩個倉庫會保持同步更新。

• newbee-mall in GitHub : https://github.com/newbee-ltd/newbee-mall-vue-app
• newbee-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 支持了一些商城的特色組件，如地址欄、省市區、商品卡片、優惠券、提交訂單、商品規格等等。

👍相關開源項目：

• newbee-mall-vue-app：新蜂商城 Vue 版本。

• 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 有贊的，畢竟東哥把我們都當作兄弟，他的技術團隊肯定不會坑我們。組件內有幾個特色組件，如數字倒計時、圖片懶加載、視頻、配送時間、轉盤抽獎、簽名、地址選擇等等。說實話，看到轉盤抽獎的時候，我都驚了，京東～真有你的！！

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

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