ElementUI 組件庫以外，供咱們選擇的 Vue 組件庫還有不少！

時間  2021-08-12
標籤 前端 vue git github web vuex vue-cli element-ui 小程序 後端 欄目 Git 简体版
原文   原文鏈接

quote

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

Vue 組件千千萬，只要不行咱就換。vue

ElementUI 近況

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

這裏放幾個知乎連接：github

element-ui 是否是不維護了web

若是 ElementUI 不維護了，也再也不支持 Vue 3了咱們該怎麼辦呢？vuex

仔細翻閱上述知乎回答，有些比較閒的做者已經 fork 了 ElementUI 的源碼，本身改造適配 Vue3，在此我只能說兩個字：敬佩。vue-cli

那麼面對這樣的狀況，做爲前端開發的咱們應該如何將損失降到最低呢？element-ui

個人答案是：耐心等待更新，不要着急不要驚慌，團隊核心成員依然在進行項目的更新，下一代 Element Plus github.com/element-plu… 也在持續迭代中。小程序

如何選擇一個好的 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月份，我的仍是很喜歡這個開源項目的，但願做者可以繼續更新，在升級 Vue3 後就不是很推薦使用了。

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

還有不少不少默默無聞的個體戶，用心的維護着本身的組件庫，在這就不一一拿出來介紹了，由於真的不少！！！也但願你們也能夠在評論區暢所欲言，說說大家喜歡的組件庫，感謝你們的觀看。

最後，推薦一下我的寫的 Vue 商城項目，感興趣的同窗能夠觀摩一下，給個 star ：

newbee-mall 在 GitHub 和國內的碼雲都建立了代碼倉庫，若是有人訪問 GitHub 比較慢的話，建議在 Gitee 上查看該項目，兩個倉庫會保持同步更新。

除註明轉載/出處外，皆爲做者原創，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接，不然保留追究法律責任的權利。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程