Vue后臺(tái)管理系統(tǒng)模板推薦
原文鏈接:??https://fe32.top/articles/xi2mpxmd/
更新記錄
2022-08-31
更新 stars 數(shù)量，按照?stars 排序。
2021-06-18
新增幾款后臺(tái)管理系統(tǒng)模板。
注意一點(diǎn)的是，在原基礎(chǔ)上直接加在后面（未按starts數(shù)排序）。
2021-03-06
推薦一些 Vue 常用后臺(tái)管理系統(tǒng)模板。
前言
Vue.js?是一個(gè)目前比較流行的前端框架，已經(jīng)到了前端人人都會(huì)的地步，今天這里為大家羅列一下基于 Vue 的后端管理的框架。目前比較流行和 Vue 搭配的 UI組件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue，另外還有Vuetify、Buefy?（Bulma css）、Vue Material?等等?；谶@些組件庫(kù)封裝的后臺(tái)管理模板，推薦一些常用 VUE后臺(tái)模板 給大家。按照?Github?星標(biāo)數(shù)量來(lái)依次介紹。
vue-element-admin (78.2k)
Vue-Element-Admin（github上的標(biāo)星數(shù)為68.6k?78.2k）是一個(gè)后臺(tái)前端解決方案，它基于?Vue?和?Element-UI?實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。
文檔地址：Document Address
集成方案：vue-element-admin
基礎(chǔ)模板：vue-admin-template
桌面終端：electron-vue-admin
Typescript版：vue-typescript-admin-template?（鳴謝: @Armour）
Others：?awesome-project
在線預(yù)覽地址：https://panjiachen.github.io/vue-element-admin
國(guó)內(nèi)用戶可訪問(wèn)該地址在線預(yù)覽：https://panjiachen.gitee.io/vue-element-admin
預(yù)覽效果：?
?
?
?
AdminLTE (41.4k)
AdminLTE（github上的標(biāo)星數(shù)為38.8k?41.4k） 是一個(gè)完全響應(yīng)的管理模板?；?Bootstrap 4.6 框架和?JS/jQuery?插件。高度可定制且易于使用。適合從小型移動(dòng)設(shè)備到大型臺(tái)式機(jī)的多種屏幕分辨率。
Github倉(cāng)庫(kù)地址：?https://github.com/ColorlibHQ/AdminLTE
文檔地址：https://adminlte.io/docs/3.1/
在線預(yù)覽地址：https://adminlte.io/themes/v3/index3.html
國(guó)內(nèi)用戶可訪問(wèn)該地址在線預(yù)覽：http://adminlte.la998.com/v3/index.html
預(yù)覽效果：?
?
?
?
?
?
?
?
iview-admin (16.2k)
iview-admin（github上的標(biāo)星數(shù)為15.4k?16.2k）是iView生態(tài)中的成員之一，是一套采用前后端分離開(kāi)發(fā)模式，基于?Vue?的后臺(tái)管理系統(tǒng)前端解決方案。iView-admin2.0 脫離 1.x 版本進(jìn)行重構(gòu)，換用?Webpack4.0?+?Vue-Cli3.0?作為基本開(kāi)發(fā)環(huán)境。內(nèi)置了開(kāi)發(fā)后臺(tái)管理系統(tǒng)常用的邏輯功能，和開(kāi)箱即用的業(yè)務(wù)組件，旨在讓開(kāi)發(fā)者能夠以最小的成本開(kāi)發(fā)后臺(tái)管理系統(tǒng)，降低開(kāi)發(fā)量。
文檔地址：https://lison16.github.io/iview-admin-doc
集成方案：https://github.com/iview/iview-admin
預(yù)覽地址：https://admin.iviewui.com
文檔地址：https://lison16.github.io/iview-admin-doc
集成方案：https://github.com/iview/iview-admin
預(yù)覽地址：https://admin.iviewui.com
預(yù)覽效果：?
vue-antd-admin(3.1k)/ant-design-vue-pro(32.8k)
Vue-Antd-Admin（github上的標(biāo)星數(shù)為1.8k?3.1k）以 Markdown 為中心的項(xiàng)目結(jié)構(gòu)， 以最少的配置幫助你專注于寫作，享受?Vue?+?Webpack?的開(kāi)發(fā)體驗(yàn)，在 Markdown 中使用 Vue 組件，同時(shí)可以使用 Vue 來(lái)開(kāi)發(fā)自定義主，VuePress 為每個(gè)頁(yè)面預(yù)渲染生成靜態(tài)的 HTML，同時(shí)在頁(yè)面被加載的時(shí)候，將作為 SPA 運(yùn)行。
文檔地址：https://iczer.gitee.io/vue-antd-admin-docs/start/use.html
集成方案：https://github.com/iczer/vue-antd-admin
國(guó)內(nèi)鏡像：https://gitee.com/iczer/vue-antd-admin
預(yù)覽地址：https://iczer.gitee.io/vue-antd-admin
常見(jiàn)問(wèn)題：https://iczer.gitee.io/vue-antd-admin-docs/start/faq.html
預(yù)覽效果：?
?
?Ant-Design-Pro?（github上的標(biāo)星數(shù)為27.5k?32.8k）基于?Ant Design?體系精心設(shè)計(jì)，提煉自中后臺(tái)應(yīng)用的典型頁(yè)面和場(chǎng)景，使用 React/dva/antd 等前端前沿技術(shù)開(kāi)發(fā)，針對(duì)不同屏幕大小設(shè)計(jì)， 可配置的主題滿足多樣化的品牌訴求， 內(nèi)建業(yè)界通用的國(guó)際化方案， 良好的工程實(shí)踐助你持續(xù)產(chǎn)出高質(zhì)量代碼，實(shí)用的本地?cái)?shù)據(jù)調(diào)試方案， 支持自動(dòng)化測(cè)試保障前端產(chǎn)品質(zhì)量。
文檔地址：https://pro.ant.design/docs/getting-started-cn
集成方案：https://github.com/ant-design/ant-design-pro
預(yù)覽地址：http://preview.pro.ant.design
常見(jiàn)問(wèn)題：http://pro.ant.design/docs/faq-cn
預(yù)覽效果：?
?
?
vue-manage-system (15.6k)
Vue-Manage-System?（github上的標(biāo)星數(shù)為11.8k?15.6k）該方案作為一套多功能的后臺(tái)框架模板，適用于絕大部分的后臺(tái)管理系統(tǒng)（Web Management System）開(kāi)發(fā)?；?Vue.js?，使用?Vue-Cli3.0?腳手架，引用?Element UI?組件庫(kù)，方便開(kāi)發(fā)快速簡(jiǎn)潔好看的組件。分離顏色樣式，支持手動(dòng)切換主題色，而且很方便使用自定義主題色。
集成方案：https://github.com/lin-xin/vue-manage-system
預(yù)覽地址：https://lin-xin.gitee.io/example/work/
預(yù)覽效果：?
?
?
vue-admin-beautiful (12.8k)
Vue-Admin-Beautiful（github上的標(biāo)星數(shù)為7.2k?12.8k）主線版本基于 element-plus、element-ui、ant-design-vue 三者并行開(kāi)發(fā)維護(hù)，同時(shí)支持電腦，手機(jī)，平板。
Github倉(cāng)庫(kù)地址：?https://github.com/chuzhixin/vue-admin-beautiful
Gitee倉(cāng)庫(kù)地址：?https://gitee.com/chu1204505056/vue-admin-beautiful
vue2.x + element-ui：vue2.x + element-ui（免費(fèi)商用，支持 PC、平板、手機(jī)）
vue3.x + element-plus：vue3.x + element-plus（alpha 版本，免費(fèi)商用，支持 PC、平板、手機(jī)）
vue3.x + ant-design-vue：vue3.x + ant-design-vue（beta 版本，免費(fèi)商用，支持 PC、平板、手機(jī)）
pro 版演示地址：pro 版演示地址（付費(fèi)版本，支持 PC、平板、手機(jī)）
特性：
?? 40+高質(zhì)量單頁(yè)
?? RBAC 模型 + JWT 權(quán)限控制
?? 10 萬(wàn)+ 項(xiàng)目實(shí)際應(yīng)用
?? 良好的類型定義
?? 開(kāi)源版本支持免費(fèi)商用
?? 跨平臺(tái) PC、手機(jī)端、平板
??? 后端路由動(dòng)態(tài)渲染
預(yù)覽效果：?
?
?
?
?
vue2-manage (12.1k)
vue2-manage?（github上的標(biāo)星數(shù)為10.2k?12.1k）此項(xiàng)目是?Vue?+?Element-UI?構(gòu)建的后臺(tái)管理系統(tǒng)，是后臺(tái)項(xiàng)目node-elm?的管理系統(tǒng)，所有的數(shù)據(jù)都是從服務(wù)器實(shí)時(shí)獲取的真實(shí)數(shù)據(jù)，具有真實(shí)的注冊(cè)、登陸、管理數(shù)據(jù)、權(quán)限驗(yàn)證等功能。
傳送門：?前端項(xiàng)目地址、后臺(tái)系統(tǒng)地址?、原生APP項(xiàng)目地址
技術(shù)棧：vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui
集成方案：https://github.com/bailicangdu/vue2-manage
預(yù)覽地址：https://cangdu.org/manage/#/manage
預(yù)覽效果：?
?
d2-admin (11.7k)
D2-Admin?（github上的標(biāo)星數(shù)為9.8k?11.7k）是一個(gè)完全 開(kāi)源免費(fèi) 的企業(yè)中后臺(tái)產(chǎn)品前端集成方案，使用最新的前端技術(shù)棧，小于 60kb 的本地首屏 js 加載，已經(jīng)做好大部分項(xiàng)目前期準(zhǔn)備工作，并且?guī)в写罅渴纠a，助力管理系統(tǒng)快速開(kāi)發(fā)。
文檔地址：https://d2.pub/zh/doc/d2-admin/
集成方案：https://github.com/d2-projects/d2-admin
國(guó)內(nèi)鏡像：https://gitee.com/d2-projects/d2-admin
Coding：https://d2-projects.coding.net/p/d2-projects/d/d2-admin/git
預(yù)覽地址：https://d2.pub/d2-admin/preview/
預(yù)覽效果：?
Vuestic-Admin (8.8k)
Vuestic-Admin（github上的標(biāo)星數(shù)為7.7k?8.8k）Free and beautiful Vue.js admin template with 44+ custom UI components, Developed by?Epicmax, Designed by?Vasili Savitski.
文檔地址：https://github.com/epicmaxco/vuestic-admin/wiki
集成方案：https://github.com/epicmaxco/vuestic-admin
預(yù)覽地址：https://vuestic.epicmax.co/admin/dashboard
預(yù)覽效果：?
?
?
?
?
?
coreui-free-vue-admin-template (3.1k)
CoreUI-Free-Vue-Admin-Template?（github上的標(biāo)星數(shù)為2.7k?3.1k）是一款基于 coreui（coreui vue bootstrap）組件的后臺(tái)管理模板。特點(diǎn)是高性能和易于定制的UI組件可滿足任何需求，從而在一半的時(shí)間內(nèi)開(kāi)發(fā)出現(xiàn)代，美觀，響應(yīng)迅速的應(yīng)用程序。
集成方案：https://github.com/coreui/coreui-free-vue-admin-template
預(yù)覽地址：https://coreui.io/vue/demo/3.2.2/#/dashboard
預(yù)覽效果：?
nx-admin (2.5k)
nx-admin?（github上的標(biāo)星數(shù)為2.3k?2.5k） 是一個(gè)開(kāi)源的管理系統(tǒng)前端集成方案，它基于?Vue?和?Element。它使用了最新的前端技術(shù)棧，內(nèi)置了i18國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。最大程度上幫助個(gè)人，企業(yè)節(jié)省時(shí)間成本和費(fèi)用開(kāi)支。
文檔地址：https://mgbq.github.io/nx-admin-site/zh/
集成方案：https://github.com/mgbq/nx-admin
國(guó)內(nèi)鏡像：https://gitee.com/symgg/nx-admin
預(yù)覽地址：https://mgbq.github.io/vue-permission/#/login
預(yù)覽效果：?
?
vue-material-admin (2.2k)
vue-material-admin?（github上的標(biāo)星數(shù)為2.1k?2.2k）。
集成方案：https://github.com/tookit/vue-material-admin
預(yù)覽地址：http://vma.isocked.com/#/dashboard
預(yù)覽效果：?
?
Vue Black Dashboard
Vue Black Dashboard?是一個(gè)Bootstrap 4 Admin Dashboard，其中包含數(shù)十個(gè)組件，自定義元素，插件和示例代碼，它們可以完美地滿足我們的設(shè)計(jì)需求。
同時(shí)它也有暗模式和亮模式。 此可切換功能確實(shí)增加了額外的自定義層，可以使應(yīng)用程序脫穎而出。
Github倉(cāng)庫(kù)地址：?https://github.com/creativetimofficial
Free 版文檔地址：Vue Black Dashboard Free Documention Address
Free 版演示地址：Vue Black Dashboard Free Demo
Pro 版文檔地址：Vue Black Dashboard Pro Documention Address
Pro 版演示地址：Vue Black Dashboard Pro Demo
預(yù)覽效果（ 前三張為 Free ，后五張為 Pro ）：
?
?
Vue White Dashboard
Vue White Dashboard 是一個(gè)免費(fèi)的 Bootstrap 4 管理模板。 有16個(gè)免費(fèi)元素，3個(gè)自定義插件和7個(gè)示例頁(yè)面，對(duì)于那些只想尋找一種免費(fèi)方法來(lái)測(cè)試其儀表板的人來(lái)說(shuō)，這是一個(gè)很好的起點(diǎn)。
主要特點(diǎn)：
免費(fèi)
Bootstrap4 管理模板
響應(yīng)式設(shè)計(jì)
16個(gè)自定義元素
文檔地址：https://www.creative-tim.com/product/vue-white-dashboard?ref=learnvue.co
演示地址：Vue Black Dashboard Free Demo
預(yù)覽效果：
?
?
