10 個 GitHub 上超火和超好看的管理後臺模版，又能愉快的上班摸魚了

時間 2020-11-30

標籤前端 vue node webpack ios git 程序員 github web 面試欄目 Git 简体版

原文原文鏈接

你們好，我是大家的超級貓，一個不喜歡吃魚、又不喜歡喵的超級貓 ~前端

前言

通常人沒事的時候刷刷朋友圈、微博、電視劇、知乎，而有些人是沒事的時候刷刷 GitHub ，看看最近有哪些流行的項目。vue

長此以往，這差距就愈來愈大，所以總會有開源信息的不對稱，有哪些優秀的前端開源項目值得學習的也不知道。node

初步前端與高級前端之間，最大的差距可能就是信息差形成的。webpack

超級貓從 2016 年加入 GitHub，到如今的 2020 年，快整整 5 個年頭了。ios

從 2018 年開始，我就養成了天天逛 GitHub 的習慣，通常在早上上班前或者中午午休的時候都會逛一下。git

看看天天都開源了哪些好的前端項目，還有用到的主流前端技術棧又是哪些，值得我去學習的。程序員

所以也收藏了很多好的開源項目，在此推薦給你們，每週會有一到三篇精華文章推送。github

但願你在瀏覽、學習了超級貓推薦的這些開源項目的過程當中，你能學習到更多編程知識、提升編程技巧、找到編程的樂趣。web

公衆號： 前端GitHub，專一於挖掘 GitHub 上優秀的前端開源項目，抹平你的前端信息不對稱，涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、數據結構與算法等等。

平時如何發現好的開源項目，能夠看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目面試

如下爲【前端GitHub】的第 8 期精華內容。

今天給你們帶來的是 GitHub 上 10 個超火和超好看管理後臺模版，但願你在這裏面找到寫省時省力的模版！

喵~ 喵~ 喵~ 正文開始了，上車坐穩扶好了~

Web 開發中幾乎的平臺都須要一個後臺管理，可是從零開發一套管理後臺模版並不容易，幸運的是有不少開源免費的管理後臺模版能夠給開發者使用。

那麼有哪些優秀的開源免費的管理後臺模版呢？

我在 GitHub 上收集了一些優秀的管理後臺模版，並且是還在不斷更新和維護的項目，並總結得出 Top 10。

1. vue-Element-Admin

vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui 實現。

它使用了最新的前端技術棧，內置了 i18n 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它能夠幫助你快速搭建企業級中後臺產品原型。

同時配套了系列教程文章，如何從零構建後一個完整的後臺項目。

手摸手，帶你用 vue 擼後臺系列一(基礎篇)
手摸手，帶你用 vue 擼後臺系列二(登陸權限篇)
手摸手，帶你用 vue 擼後臺系列三 (實戰篇)
手摸手，帶你用 vue 擼後臺系列四(vueAdmin 一個極簡的後臺基礎模板)
手摸手，帶你用 vue 擼後臺系列五(v4.0新版本)
手摸手，帶你封裝一個 vue component
手摸手，帶你優雅的使用 icon
手摸手，帶你用合理的姿式使用 webpack4（上）
手摸手，帶你用合理的姿式使用 webpack4（下）

該項目還在一直維護中。

並且也是配有使用文檔的，很不錯。

Github Star 數 62.2K， Github 地址：

https://github.com/PanJiaChen...

2. iview-admin

iView Admin 是基於 Vue.js，搭配使用 iView UI 組件庫造成的一套後臺集成解決方案，由 TalkingData 前端可視化團隊部分紅員開發維護。

iView Admin 遵照 iView 設計和開發約定，風格統一，設計考究，而且更多功能在不停開發中。

不過該項目已經一年多沒有更新維護了，估計是在等出了配合 Vue3 相關的 iView UI 庫再更新了吧。

並且也是配有使用文檔的，很不錯。

Github Star 數 15.3K，Github 地址：

https://github.com/iview/ivie...

3. vue-admin-template

這是一個極簡的 vue admin 管理後臺。它只包含了 Element UI & axios & iconfont & permission control & lint，這些搭建後臺必要的東西。

目前版本爲 v4.0+ 基於 vue-cli 進行構建，若你想使用舊版本，能夠切換分支到 tag/3.11.0，它不依賴 vue-cli。

極簡版，就是 vue-Element-Admin 的簡化版，功能簡單一點，方便快速開發用的。

並且也是配有使用文檔的，很不錯。

Github Star 數 12K，Github 地址：

https://github.com/PanJiaChen...

4. ant-design-pro

開箱即用的中臺前端 / 設計解決方案。

Ant Design Pro 是基於 Ant Design 和 umi 的封裝的一整套企業級中後臺前端/設計解決方案，致力於在設計規範和基礎組件的基礎上，繼續向上構建，提煉出典型模板/業務組件/配套設計資源，進一步提高企業級中後臺產品設計研發過程當中的『用戶』和『設計者』的體驗。

隨着『設計者』的不斷反饋，咱們將持續迭代，逐步沉澱和總結出更多設計模式和相應的代碼實現，闡述中後臺產品模板/組件/業務場景的最佳實踐，也十分期待你的參與和共建。

Ant Design Pro 在力求提供開箱即用的開發體驗，爲此咱們提供完整的腳手架，涉及國際化，權限，mock，數據流，網絡請求等各個方面。

爲這些中後臺中常見的方案提供了最佳實踐來減小學習和開發成本。

並且也是配有使用文檔的，很不錯。

Github Star 數 27.2K，Github 地址：

https://github.com/ant-design...

5. ngx-admin

基於Angular 10+ 的可定製管理儀表板模，還擁有 6 個驚人的視覺主題。

Github Star 數 21.7K，Github 地址：

https://github.com/akveo/ngx-...

6. vue-admin-beautiful

vue-admin-beautiful 是一款基於 vue+element-ui 的絕佳的中後臺前端開發管理框架（基於 vue/cli 4 最新版，同時支持電腦，手機，平板）。

vue-admin-beautiful-pro 擁有四種佈局（畫廊佈局、綜合佈局、縱向佈局、橫向佈局）四種主題（默認、海洋之心、綠茵草場，榮耀典藏），共計 16 佈局主題種組合，知足全部項目場景。

已支持常規 bug 自動修復，前端代碼自動規範，代碼一鍵生成等衆多功能，能夠在徹底不依賴後臺的狀況下獨立開發完成項目，以及接口自動模擬生成，支持 JAVA、PHP、NODE、.NET、Django 等經常使用全部後臺對接，甚至徹底放棄 JAVA 等常規後端開發，內置 node 服務支持直接操做數據庫進行增刪改查，支持當前流行的 unicloud、serverless 雲開發。

該項目還在不斷更新和維護中，不錯。

https://github.com/chuzhixin/...

7. vuestic-admin

這是一個免費與美妙 Vue.js 管理模板，包括 38 以上個定製用戶界面組件。

響應佈局 | 圖表(Charts.js) | 進度表 | 表格 | 選輯 | 日期選擇器 | 複選框和單選框 | 靜態表與數據表 | medium editor | 平滑設計字體 | 按鈕 | 塌縮 | 顏色選擇器 | 時間線 | 土司通知 | 工具提示 | 彈窗 | 圖標 | 自旋體 | 模式 | 文件上傳 | 厚切薯條通知 | 樹 | 卡片 | 等級 | 滑動器 | 聊天系統 | 地圖(Google, Yandex, Leaflet, amMap) | 登陸/註冊頁模板 | 404頁模板 | i18n

Github Star 數 7.6K，Github 地址：