Web 開發(fā)中幾乎的平臺(tái)都需要一個(gè)后臺(tái)管理,但是從零開發(fā)一套管理后臺(tái)模板并不容易,幸運(yùn)的是有很多開源免費(fèi)的管理后臺(tái)模板可以給開發(fā)者使用。
那么有哪些優(yōu)秀的開源免費(fèi)的管理后臺(tái)模板呢?
我在 GitHub 上收集了一些優(yōu)秀的管理后臺(tái)模板,而且是還在不斷更新和維護(hù)的項(xiàng)目,并總結(jié)得出 Top 10。
1. vue-Element-Admin
vue-element-admin 是一個(gè)后臺(tái)前端解決方案,它基于 vue 和 element-ui實(shí)現(xiàn)。
它使用了最新的前端技術(shù)棧,內(nèi)置了 i18n 國(guó)際化解決方案,動(dòng)態(tài)路由,權(quán)限驗(yàn)證,提煉了典型的業(yè)務(wù)模型,提供了豐富的功能組件,它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。
同時(shí)配套了系列教程文章,如何從零構(gòu)建后一個(gè)完整的后臺(tái)項(xiàng)目。
- 手摸手,帶你用 vue 擼后臺(tái) 系列一(基礎(chǔ)篇)
- 手摸手,帶你用 vue 擼后臺(tái) 系列二(登錄權(quán)限篇)
- 手摸手,帶你用 vue 擼后臺(tái) 系列三 (實(shí)戰(zhàn)篇)
- 手摸手,帶你用 vue 擼后臺(tái) 系列四(vueAdmin 一個(gè)極簡(jiǎn)的后臺(tái)基礎(chǔ)模板)
- 手摸手,帶你用 vue 擼后臺(tái) 系列五(v4.0新版本)
- 手摸手,帶你封裝一個(gè) vue component
- 手摸手,帶你優(yōu)雅的使用 icon
- 手摸手,帶你用合理的姿勢(shì)使用 webpack4(上)
- 手摸手,帶你用合理的姿勢(shì)使用 webpack4(下)
該項(xiàng)目還在一直維護(hù)中。
而且也是配有使用文檔的,很不錯(cuò)。
Github Star 數(shù) 62.2K, Github 地址:
https://github.com/PanJiaChen/vue-element-admin
2. iview-admin
iView Admin 是基于 Vue.js,搭配使用 iView UI 組件庫(kù)形成的一套后臺(tái)集成解決方案,由 TalkingData 前端可視化團(tuán)隊(duì)部分成員開發(fā)維護(hù)。
iView Admin 遵守 iView 設(shè)計(jì)和開發(fā)約定,風(fēng)格統(tǒng)一,設(shè)計(jì)考究,并且更多功能在不停開發(fā)中。
不過該項(xiàng)目已經(jīng)一年多沒有更新維護(hù)了,估計(jì)是在等出了配合 Vue3 相關(guān)的 iView UI 庫(kù)再更新了吧。
而且也是配有使用文檔的,很不錯(cuò)。
Github Star 數(shù) 15.3K,Github 地址:
https://github.com/iview/iview-admin
3. vue-admin-template
這是一個(gè)極簡(jiǎn)的 vue admin 管理后臺(tái)。它只包含了 Element UI & axios & iconfont & permission control & lint,這些搭建后臺(tái)必要的東西。
目前版本為 v4.0+ 基于 vue-cli 進(jìn)行構(gòu)建,若你想使用舊版本,可以切換分支到 tag/3.11.0,它不依賴 vue-cli。
極簡(jiǎn)版,就是 vue-Element-Admin 的簡(jiǎn)化版,功能簡(jiǎn)單一點(diǎn),方便快速開發(fā)用的。
而且也是配有使用文檔的,很不錯(cuò)。
Github Star 數(shù) 12K,Github 地址:
https://github.com/PanJiaChen/vue-admin-template
4. ant-design-pro
開箱即用的中臺(tái)前端 / 設(shè)計(jì)解決方案。
Ant Design Pro 是基于 Ant Design 和 umi 的封裝的一整套企業(yè)級(jí)中后臺(tái)前端/設(shè)計(jì)解決方案,致力于在設(shè)計(jì)規(guī)范和基礎(chǔ)組件的基礎(chǔ)上,繼續(xù)向上構(gòu)建,提煉出典型模板/業(yè)務(wù)組件/配套設(shè)計(jì)資源,進(jìn)一步提升企業(yè)級(jí)中后臺(tái)產(chǎn)品設(shè)計(jì)研發(fā)過程中的『用戶』和『設(shè)計(jì)者』的體驗(yàn)。
隨著『設(shè)計(jì)者』的不斷反饋,我們將持續(xù)迭代,逐步沉淀和總結(jié)出更多設(shè)計(jì)模式和相應(yīng)的代碼實(shí)現(xiàn),闡述中后臺(tái)產(chǎn)品模板/組件/業(yè)務(wù)場(chǎng)景的最佳實(shí)踐,也十分期待你的參與和共建。
Ant Design Pro 在力求提供開箱即用的開發(fā)體驗(yàn),為此我們提供完整的腳手架,涉及國(guó)際化,權(quán)限,mock,數(shù)據(jù)流,網(wǎng)絡(luò)請(qǐng)求等各個(gè)方面。
為這些中后臺(tái)中常見的方案提供了最佳實(shí)踐來減少學(xué)習(xí)和開發(fā)成本。
而且也是配有使用文檔的,很不錯(cuò)。
Github Star 數(shù) 27.2K,Github 地址:
https://github.com/ant-design/ant-design-pro
5. ngx-admin
基于Angular 10+ 的可定制管理儀表板模,還擁有 6 個(gè)驚人的視覺主題。
Github Star 數(shù) 21.7K,Github 地址:
https://github.com/akveo/ngx-admin
6. vue-admin-beautiful
vue-admin-beautiful 是一款基于 vue+element-ui 的絕佳的中后臺(tái)前端開發(fā)管理框架(基于 vue/cli 4 最新版,同時(shí)支持電腦,手機(jī),平板)。
vue-admin-beautiful-pro 擁有四種布局(畫廊布局、綜合布局、縱向布局、橫向布局)四種主題(默認(rèn)、海洋之心、綠茵草場(chǎng),榮耀典藏),共計(jì) 16 布局主題種組合,滿足所有項(xiàng)目場(chǎng)景。
已支持常規(guī) bug 自動(dòng)修復(fù),前端代碼自動(dòng)規(guī)范,代碼一鍵生成等眾多功能,可以在完全不依賴后臺(tái)的情況下獨(dú)立開發(fā)完成項(xiàng)目,以及接口自動(dòng)模擬生成,支持 JAVA、PHP、NODE、.NET、Django 等常用所有后臺(tái)對(duì)接,甚至完全放棄 JAVA 等常規(guī)后端開發(fā),內(nèi)置 node 服務(wù)支持直接操作數(shù)據(jù)庫(kù)進(jìn)行增刪改查,支持當(dāng)前流行的 unicloud、serverless 云開發(fā)。
該項(xiàng)目還在不斷更新和維護(hù)中,不錯(cuò)。
https://github.com/chuzhixin/vue-admin-beautiful
7. vuestic-admin
這是一個(gè)免費(fèi)與美妙 Vue.js 管理模板,包括 38 以上個(gè)定制用戶界面組件。
響應(yīng)布局 | 圖表(Charts.js) | 進(jìn)度表 | 表格 | 選輯 | 日期選擇器 | 復(fù)選框和單選框 | 靜態(tài)表與數(shù)據(jù)表 | medium editor | 平滑設(shè)計(jì)字體 | 按鈕 | 塌縮 | 顏色選擇器 | 時(shí)間線 | 土司通知 | 工具提示 | 彈窗 | 圖標(biāo) | 自旋體 | 模式 | 文件上傳 | 厚切薯?xiàng)l通知 | 樹 | 卡片 | 等級(jí) | 滑動(dòng)器 | 聊天系統(tǒng) | 地圖(Google, Yandex, Leaflet, amMap) | 登錄/注冊(cè)頁(yè)模板 | 404頁(yè)模板 | i18n
Github Star 數(shù) 7.6K,Github 地址:
https://github.com/epicmaxco/vuestic-admin
8. antd-admin
一套優(yōu)秀的中后臺(tái)前端解決方案。
特性
- 國(guó)際化,源碼中抽離翻譯字段,按需加載語(yǔ)言包
- 動(dòng)態(tài)權(quán)限,不同權(quán)限對(duì)應(yīng)不同菜單
- 優(yōu)雅美觀,Ant Design 設(shè)計(jì)體系
- Mock 數(shù)據(jù),本地?cái)?shù)據(jù)調(diào)試
- 而且也是配有使用文檔的,很不錯(cuò)。
https://github.com/zuiidea/antd-admin
9. eladmin
一個(gè)簡(jiǎn)單且易上手的 Spring boot 后臺(tái)管理框架
技術(shù)棧
使用 SpringBoot、Jpa、Security、Redis、Vue 等前后端前沿技術(shù)開發(fā)。
模塊化
后端采用按功能分模塊開發(fā)方式,提升開發(fā),測(cè)試效率。
高效率
項(xiàng)目簡(jiǎn)單可配,內(nèi)置代碼生成器,配置好表信息就能一鍵生成前后端代碼。
分離式
前后端完全分離,前端基于 Vue,后端基于 Spring boot。
響應(yīng)式
支持電腦、平板、手機(jī)等所有主流設(shè)備訪問。
易用性
幾乎可用于所有 Web 項(xiàng)目的開發(fā),如 OA、Cms,網(wǎng)址后臺(tái)管理等。
前后端都有,還是挺不錯(cuò)的。
https://github.com/elunez/eladmin
10. AdminLTE
AdminLTE 是一個(gè)完全響應(yīng)的管理模板?;?Bootstrap 4.5 框架以及 JS / jQuery 插件。
高度可定制且易于使用。適合從小型移動(dòng)設(shè)備到大型臺(tái)式機(jī)的多種屏幕分辨率。
AdminLTE 的所有 JS,SCSS 和 HTML 文件均經(jīng)過精心編碼,并帶有清晰的注釋。SCSS 已用于提高代碼的可定制性。
ui 風(fēng)格也不偏向于外國(guó)吧,比較簡(jiǎn)結(jié)。
好的地方是還一直在更新和維護(hù),最大的不足就是還依賴于 jQuery 這個(gè)舊時(shí)代的產(chǎn)物,唉。
Github Star 數(shù) 36.8K 也非常高 , Github 地址:
https://github.com/almasaeed2010/AdminLTE
原文地址:https://mp.weixin.qq.com/s?__biz=MzA3NzA2MDMyNA==&mid=2650358352&idx=2&sn=aa738be72d8ee4c20a3a3d6956d1afb3&chksm=875a23dbb02daacd11028d6544c8111dae8462cb916e8c2f789a0b6426b6e4ed295fca2c713d&mpshare=1&