最好用的 7 款 Vue admin 後臺管理系統測評

蔣川 發表於 2022-01-25
Vue

本文首發:《最好用的 7 款 Vue admin 後臺管理系統測評 - 卡拉雲

Vue admin 後臺管理系統作為每個專案必備的管理後臺,對大家來說十分重要。選不好,配不好,不僅現在用著抓狂,未來迭代升級也困難重重,步步是坑。所以在技術選型階段,就要對市面上主流的 Vue admin 做到全面瞭解,知道他們的優缺點,再根據自己專案的需求,有針對性的選擇。

我試用了市面上所有主流 Vue admin 都 npm 到本地測了一遍,篩掉長期不更新,bug 明顯,社群活躍度低,功能單一的 admin 後臺,把最好、最有特點的 7 款 Vue admin 挑出來,分享給大家。這些後臺各有各的特點,有些功能多樣,但整體很重;有些雖然穩定,但上線年頭久遠,含有大量陳舊功能;有些功能雖然少,但某一項功能優化的特別好。希望我的測評可以幫助你選到合適你需求的 admin 後臺系統。

另外,這個世界已經悄然發生變化,現在根本無需寫任何前端程式碼,直接使用卡拉雲—— 新一代低程式碼開發工具幫你搭建 admin 後臺管理系統。無需部署安裝、一鍵接入資料庫及 API,前端僅需簡單拖拽,即可按照你的需求,隨心所欲搭建適合任何應用場景的 admin 後臺系統。原來三天的工作量,現在 1 小時搞定,誰用誰知道,用上早下班,詳見本文文末。

本文測評的 7 款 Vue admin 後臺管理系統

  • Vue element admin - 老牌 admin 後臺管理 求穩首選
  • Antd Pro Vue - 背靠阿里,程式碼過硬,大型專案首選
  • Vue vben admin - 寶藏後臺管理 基於 Vue3 UI清新 功能紮實
  • iView Admin - 老牌 admin 程式碼工程化 建立生態 高價高品質
  • D2Admin - 趁手 好用 程式碼工程化 RBAC 許可權管理
  • Naive Ui admin - 基於 Vue3 的後臺管理新星 適合小專案
  • mall admin web - 電商類 Vue admin 後臺管理
  • 卡拉雲 - 新一代低程式碼開發工具,無需部署,無需任何前端技術,隨心所欲搭建屬於你的 admin 後臺

一. Vue element admin - 老牌 admin 後臺管理 求穩首選

Vue-element-admin

Vue element admin 是國內最早也是目前最完善的後臺前端解決方案,一定得放在第一個說。作為 Vue admin 解決方案的前輩之一,element admin 的使用者眾多,社群龐大,無論你在使用中碰到什麼問題,到處搜搜,基本上都能找與你碰到類似問題的使用者提問及解答。

Vue-element-admin

element admin 基於 Vue + element UI 來實現,內建動態路由,許可權管理,i18n (國際化外掛),它把典型的業務模型幫你提煉出來,在你需要的業務場景中做到比你想的還要更好,極其豐富的功能元件,是你搭建企業內部後臺的好選擇。

當然,它的優點也是它的缺點,經過這麼多年的迭代,不斷的加功能,不斷迭代堆積,element admin 稍微有點臃腫,不適合當基礎模版來二開,它整合的眾多細緻功能,會造成不少程式碼冗餘。

Vue element admin 經過時間篩選出來,能活到現在依然活躍是有原因的,如果你剛開始搭建管理後臺,推薦你從 Vue element admin 開始試用。作者花褲衩自己寫了個教程《手摸手帶你用vue擼後臺》特別棒,前端萌新可以跟著這個走一遍。

擴充套件閱讀:《手把手教你Vue3+Node.js+Expres+MySQL環境搭建

二. Antd Pro Vue - 背靠阿里,程式碼過硬,大型專案首選

Antd-Pro-Vue

2018年3月,螞蟻正式開源了 Ant Design 的 Vue 版本,幾個月後,緊接著釋出了這套 Vue 元件庫的完整前端腳手架 Antd Pro Vue(Vue admin 後臺管理系統)。

Antd Pro Vue 作為 Vue admin 後臺管理框架,視覺設計上傳承了 Antd 的嚴謹專業。官網文件經過這麼多多年的迭代,已經從最開始的粗略版升級至現在涵蓋各類問題解決方案的專業好文件。

Antd-Pro-Vue

Antd Pro Vue 從出生那一刻開始就是為複雜業務所建,它不是從簡單功能逐漸迭代到複雜功能,而是從一開始設計時,就按照大公司複雜業務來設計,從一個更巨集觀的視角來有序安排,提煉出各類業務場景做成制式頁,不論你是什麼獨特的業務場景,都可以找到合適自己的,稍加改動即可上線。

三. Vue vben admin - 寶藏後臺管理 基於 Vue3 UI清新 功能紮實

Vue-vben-admin

Vue vben admin 是我一直想推薦的寶藏 admin 後臺管理系統,視覺效果一流,功能安排合理。目前基於 Vue3 構建又好用的後臺不是太多,Vben admin 基於最新的 Vue3、Vite、Ant-Design-Vue、TypeScript 構建。

Vben 雖然早期版本有些問題,有些地方過度封裝,有一些學習成本,但作者迭代的相當快,大多數問題在文件都可以找到並解決。

Vue-vben-admin

vben 提供了完整版和2兩個不同型別的精簡版,畢竟大多數使用者會根據自己的使用場景進行二開,會刪掉自己不需要的程式碼,作者洞察到了這個需求,幫大家完成了這一步。

雖然 vben 文件裡描述自己適合做中大型中後臺,但 vben 釋出時間還比較短,還有挺多升級迭代的路要走,建議謹慎選擇。我個人非常看好 vben ,期待它有朝一日,獨霸一方。

擴充套件閱讀:《Axios 教程:Vue + Axios 安裝及實戰 - 手把手教你搭建加密幣實時價格看板

四. iView Admin - 老牌 admin 程式碼工程化 建立生態 高價高品質

iView-Admin

2017 年 iView admin 剛釋出時,國內各類 Vue UI 框架都剛起步,還沒有現在這種頭部一家獨大的局面。當時正好在 V2EX 看到相關資訊,試了試很喜歡,經過這麼多年,現在已經迭代多個版本,並且在 2019年釋出了 iView admin pro 版,我來說說這兩個版本。

iView-Admin-rich

iView admin 基於 Vue + iView UI 元件庫構建的後臺管理解決方案,它作為 iView 生態上的成員之一,遵循 iView 設計邏輯,風格統一。iView 元件很符合 Vue 開發模式,如果你同時也很熟悉 React ,那麼切到 Vue ,使用 iView 也會更容易適應。但這個 admin 基礎版對資料量較大的情況,處理的不是很好,把它當作輕便的基礎 admin 使用更合適。

iView 在 2019 年推出了全系列 Pro 版本之後,對基礎版的維護和更新就很少了,不過我仍然覺得基礎版現在的狀態,用在自己的小專案中,邊用邊學習是不錯的選擇。

iView-Admin-pro-rich

iView admin Pro 在基礎版的基礎上有很多重大升級,對各類應用場景都做了細緻的支援。另外 pro 對 PC 端和移動端做了非常好的自適應處理。Pro 版內建了 Quill 富文字編輯器,我自己也超愛 Quill,它非常簡潔,沒有多餘功能,特別是對程式碼書寫極其友好,具體可以看我寫的這篇《最好用的 7 款 Vue 3 富文字編輯器》。

iView admin Pro 售價高達 1 萬元,它有著商業軟體應有的流暢和趁手,這種付費 admin 我找機會單開一篇寫個測評,這裡不展開了。

擴充套件閱讀:《最好的 6 個免費天氣 API 介面對比測評

五. D2Admin - 趁手 好用 程式碼工程化 RBAC 許可權管理

D2Admin

D2Admin 絕對是一款低調又好用的 admin 後端管理系統。它是完全免費開源的企業中後臺管理整合方案,在 element-ui 相關的開源專案裡,D2 admin 的結構和程式碼風格順暢清晰,小於 60kb 的本地首屏 JS 載入,而且 D2 的許可權管理遵循 RBAC 模型

D2Admin-rich

D2Admin 使用 Vue-cli3 構建,內建 UEditor 富文字編輯器,多款主題,分離的路由和選單設定,可拖拽的頁面佈局,Fontawesome 圖示庫以及提供了資料匯出另存為 Excel 檔案,這對有些資料看板類的專案尤為重要。

擴充套件閱讀:《最好的 5 款翻譯 API 介面對比測評

六. Naive Ui admin - 基於 Vue3 的後臺管理新星 適合小專案

Naive-Ui-Vue-Admin

Naive Ui admin是我最近用過特別輕便的一款 Vue admin 中後臺管理系統解決方案。它完全免費,可商用。

Naive-Ui-Vue-Admin

目前基於 Vue3 有好用的專案並不多,老牌前端框架還在支援 Vue3 的路上,現在支援 Vue3 完成度又高的專案屈指可數,Naive Ui Vue Admin 相對來說,是一個比較完整的專案,雖然有些元件還有待開發,但以目前作者的更新頻率來說,應該很快就能趕上。

擴充套件閱讀:《Postman 使用教程 - 手把手教你 API 介面測試

七. mall admin web - 電商類 Vue admin 後臺管理

mall-admin-web

mall admin web 主要針對電商垂直場景,開發的電商後臺管理系統。mall admin 內建功能主要圍繞電商需求展開,商品管理、訂單、會員、促銷、統計報表、財務管理等有針對性的功能場景展開。

對於快速上線的電商專案,這套系統是非常好的選擇,功能全覆蓋,簡單又直接。

mall-admin-web

mall admin web 基於 Vue + Element 構建,整個功能分佈合理,包含電商的大部分所需,方便大家進行二次開發。作者也寫了它的後端專案 mall,基於 SpringBoot+MyBatis 實現,採用Docker容器化部署,配合使用更加。

八. admin 管理後臺總結及「卡拉雲」

本文介紹了我自己用過的 7 款 Vue admin 後臺管理系統的特點,大家可以根據自己工作中的實際場景來挑選合適自己的後管系統。

如果你想搭建自己的 admin 後臺管理工具,但又不是很熟悉前端,可以考慮使用卡拉雲真正開箱即用,無需寫任何前端程式碼,僅需拖拽,即可快速生成適合你專案的 admin 後臺管理系統。

kalacloud
上圖為卡拉雲使用者根據自己專案情況,搭建的廣告投放監測系統,整個搭建過程用時 50 分鐘

卡拉雲是新一代低程式碼開發工具,免安裝部署,可一鍵接入包括 MySQL 在內的常見資料庫及 API。可根據自己的工作流,定製開發。無需繁瑣的前端開發,只需要簡單拖拽,即可快速搭建企業內部工具。三天的工作量,使用卡拉雲後,可縮減至 1 小時,歡迎免費試用卡拉雲

九. 本文作者

蔣川,卡拉雲聯合創始人,B 端資料開發。

如果你有任何問題,歡迎新增微信一起交流。我的微 HiJiangChuan

擴充套件閱讀: