后臺(tái)管理系統(tǒng)是我們許多信息化項(xiàng)目必不可少的子系統(tǒng)。使用Vue作為后臺(tái)管理系統(tǒng)或者業(yè)務(wù)系統(tǒng)的前端框架，開發(fā)起來非常便利，因?yàn)閂ue是前端三大主流框架之一，也是目前最火的一個(gè)前端框架，擁有強(qiáng)大的社區(qū)支持。Vue作為一套構(gòu)建用戶界面的框架，關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合，能夠提高開發(fā)效率。

目前Vue的3.0版本比2.0有了許多提升，這也是本文分享基于Vue3的后臺(tái)管理項(xiàng)目的原因。Vue3主要提升的地方包括：

• 響應(yīng)式性能提升：性能比Vue2快1.2～2倍。
• 代碼體積更?。合啾萔ue2，Vue3按需編譯，整體體積變小了。
• 支持組合API（Composition Api）：Vue2使用Options Api（選項(xiàng)api），而Vue3使用Composition Api （組合api）。
• 更好的 ts 支持：Vue 新增了 DefineComponent 函數(shù)，使組件在 ts 下，更好地利用參數(shù)類型推斷。
• 擁有更多先進(jìn)的組件。

總之，Vue3讓項(xiàng)目更快、代碼更少、更易于維護(hù)、開發(fā)更快。

在開源社區(qū)，已經(jīng)有很多強(qiáng)人發(fā)布了基于Vue3的后臺(tái)管理系統(tǒng)，以下是一些精心挑選的項(xiàng)目，這些項(xiàng)目非常優(yōu)秀、外觀漂亮、非常通用，適合用于各種后臺(tái)管理類型的項(xiàng)目，同時(shí)也支持根據(jù)需求定制化開發(fā)。

1.eladmin

GitHub（20.3K）：

• https://github.com/elunez/eladmin
• https://github.com/elunez/eladmin-mp

這是一個(gè)基于 Spring Boot 2.6.4 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue的前后端分離的后臺(tái)管理系統(tǒng)。

這個(gè)項(xiàng)目現(xiàn)已發(fā)布基于 mybatis-plus 版本，eladmin jpa 版本項(xiàng)目基于 Spring Boot 2.6.4、 Jpa、 Spring Security、Redis、Vue的前后端分離的后臺(tái)管理系統(tǒng)，項(xiàng)目采用分模塊開發(fā)方式， 權(quán)限控制采用 RBAC，支持?jǐn)?shù)據(jù)字典與數(shù)據(jù)權(quán)限管理，支持一鍵生成前后端代碼，支持動(dòng)態(tài)路由。PLUS版本的地址為：https://github.com/elunez/eladmin-mp。

2.Vue Admin Better

github（15.2k）：https://github.com/chuzhixin/vue-admin-better

功能特性：

• 40+高質(zhì)量單頁
• RBAC 模型 + JWT 權(quán)限控制
• 10 萬+ 項(xiàng)目實(shí)際應(yīng)用
• 良好的類型定義
• 開源版本支持免費(fèi)商用
• 跨平臺(tái) PC、手機(jī)端、平板
• 后端路由動(dòng)態(tài)渲染

框架優(yōu)勢：

• 支持前端控制路由權(quán)限 intelligence、后端控制路由權(quán)限 all 模式
• 已知來源 vue admin 框架中首家支持 mock 自動(dòng)生成自動(dòng)導(dǎo)出功能
• 提供 50 余項(xiàng)全局精細(xì)化配置
• 支持 scss 自動(dòng)排序，eslint 自動(dòng)修復(fù)
• axios精細(xì)化封裝，支持多數(shù)據(jù)源、多code數(shù)組，支持 application/json;charset=UTF-8、application/x-www-form-urlencoded;charset=UTF-8 多種傳參方式
• 支持登錄RSA加密
• 支持打包自動(dòng)生成7Z壓縮包
• 支持errorlog錯(cuò)誤攔截
• 支持多主題、多布局切換

3.Vue Pure Admin

github（11.1K）：https://github.com/xiaoxian521/vue-pure-admin

vue-pure-admin 是一款開源免費(fèi)且開箱即用的中后臺(tái)管理系統(tǒng)模版。使用了最新的 Vue3+Vite+Element-Plus+TypeScript+Pinia+Tailwindcss 等主流技術(shù)開發(fā)。

另外，vue-pure-admin還提供了精簡版，精簡版是基于 vue-pure-admin 提煉出的架子，包含主體功能，更適合實(shí)際項(xiàng)目開發(fā)，打包后的大小在全局引入 element-plus 的情況下仍然低于 2.3MB，并且會(huì)永久同步完整版的代碼。開啟 brotli 壓縮和 cdn 替換本地庫模式后，打包大小低于 350kb。

對于瀏覽器的支持如下表所示：

4.newbee-mall-vue3-app

GitHub（5.5K）：https://github.com/newbee-ltd/newbee-mall-vue3-app

這是一個(gè)Vue3 全家桶 + Vant 搭建大型單頁面商城項(xiàng)目，新蜂商城 Vue3.2 版本，技術(shù)棧為 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。

newbee-mall 包括 newbee-mall 商城系統(tǒng)及 newbee-mall-admin 商城后臺(tái)管理系統(tǒng)，基于 Spring Boot 和 Vue 以及相關(guān)技術(shù)棧開發(fā)。前臺(tái)商城系統(tǒng)包含首頁門戶、商品分類、新品上線、首頁輪播、商品推薦、商品搜索、商品展示、購物車、訂單結(jié)算、訂單流程、個(gè)人訂單管理、會(huì)員中心、幫助中心等模塊。后臺(tái)管理系統(tǒng)包含數(shù)據(jù)面板、輪播圖管理、商品管理、訂單管理、會(huì)員管理、分類管理、設(shè)置等模塊。

5.vue3-composition-admin

GitHub（2.9K）：https://github.com/RainManGO/vue3-composition-admin

這是一個(gè)基于vue3 的管理端模板(Vue3 TS Vuex4 element-plus vue-i18n-next composition-api) ，項(xiàng)目的基礎(chǔ)版本出自于源于花褲衩大佬的 vue-element-admin。

支持的瀏覽器列表如下：

6.vue3-antd-admin

GitHub（2.8K）：https://github.com/buqiyuan/vue3-antdv-admin

一套基于 vite4.x + vue3.x + antd-design-vue4.x + typescript5.x 的后臺(tái)管理系統(tǒng)模板。系統(tǒng)包含RBAC的權(quán)限系統(tǒng)、JSON Schema動(dòng)態(tài)表單、動(dòng)態(tài)表格以及漂亮鎖屏界面。

7.vue-typescript-admin-template

GitHub（5.3K）：https://github.com/Armour/vue-typescript-admin-template

vue-typescript-admin-template 是一個(gè)后臺(tái)前端解決方案，它基于 vue, typescript 和 element-ui實(shí)現(xiàn)。

如果你想從一個(gè)十分簡單的基礎(chǔ)模版開始，而不是直接使用這個(gè)功能豐富的集成方案的話，你可以看一看本項(xiàng)目的 minimal 分支.

支持的瀏覽器列表如下：

8.Geeker-Admin

GitHub（5.3K）：https://github.com/HalseySpicy/Geeker-Admin

Geeker Admin是一個(gè)基于 Vue3.3、TypeScript、Vite4、Pinia、Element-Plus 開源的一套后臺(tái)管理框架。

支持的瀏覽器如下表：

9.RuoYi-Vue3

GitHub（3K）：https://github.com/yangzongzhuan/RuoYi-Vue3

RuoYi是基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分離權(quán)限管理系統(tǒng)。

主要功能包括：

• 用戶管理：用戶是系統(tǒng)操作者，該功能主要完成系統(tǒng)用戶配置。
• 部門管理：配置系統(tǒng)組織機(jī)構(gòu)（公司、部門、小組），樹結(jié)構(gòu)展現(xiàn)支持?jǐn)?shù)據(jù)權(quán)限。
• 崗位管理：配置系統(tǒng)用戶所屬擔(dān)任職務(wù)。
• 菜單管理：配置系統(tǒng)菜單，操作權(quán)限，按鈕權(quán)限標(biāo)識(shí)等。
• 角色管理：角色菜單權(quán)限分配、設(shè)置角色按機(jī)構(gòu)進(jìn)行數(shù)據(jù)范圍權(quán)限劃分。
• 字典管理：對系統(tǒng)中經(jīng)常使用的一些較為固定的數(shù)據(jù)進(jìn)行維護(hù)。
• 參數(shù)管理：對系統(tǒng)動(dòng)態(tài)配置常用參數(shù)。
• 通知公告：系統(tǒng)通知公告信息發(fā)布維護(hù)。
• 操作日志：系統(tǒng)正常操作日志記錄和查詢；系統(tǒng)異常信息日志記錄和查詢。
• 登錄日志：系統(tǒng)登錄日志記錄查詢包含登錄異常。
• 在線用戶：當(dāng)前系統(tǒng)中活躍用戶狀態(tài)監(jiān)控。
• 定時(shí)任務(wù)：在線（添加、修改、刪除)任務(wù)調(diào)度包含執(zhí)行結(jié)果日志。
• 代碼生成：前后端代碼的生成（java、html、xml、sql）支持CRUD下載 。
• 系統(tǒng)接口：根據(jù)業(yè)務(wù)代碼自動(dòng)生成相關(guān)的api接口文檔。
• 服務(wù)監(jiān)控：監(jiān)視當(dāng)前系統(tǒng)CPU、內(nèi)存、磁盤、堆棧等相關(guān)信息。
• 緩存監(jiān)控：對系統(tǒng)的緩存信息查詢，命令統(tǒng)計(jì)等。
• 在線構(gòu)建器：拖動(dòng)表單元素生成相應(yīng)的HTML代碼。
• 連接池監(jiān)控：監(jiān)控當(dāng)前系統(tǒng)數(shù)據(jù)庫連接池狀態(tài)，可進(jìn)行分析SQL找出系統(tǒng)性能瓶頸。

10.v3-admin-vite

GitHub（2.8K）：https://github.com/un-pany/v3-admin-vite

vue-element-admin 是一個(gè)后臺(tái)前端解決方案，它基于 vue 和 element-ui實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了 i18n 國際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級中后臺(tái)產(chǎn)品原型。

支持瀏覽器如下表所示：

11.Vben-admin

GitHub（1.9K）：https://github.com/vbenjs/vben-admin-thin-next

Vue Vben Admin 是一個(gè)免費(fèi)開源的中后臺(tái)模版。使用了最新的vue3,vite2,TypeScript等主流技術(shù)開發(fā)，開箱即用的中后臺(tái)前端解決方案，也可用于學(xué)習(xí)參考。

功能特性：

• 最新技術(shù)棧：使用 Vue3/vite2 等前端前沿技術(shù)開發(fā)
• TypeScript: 應(yīng)用程序級 JavaScript 的語言
• 主題：可配置的主題
• 國際化：內(nèi)置完善的國際化方案
• Mock 數(shù)據(jù) 內(nèi)置 Mock 數(shù)據(jù)方案
• 權(quán)限 內(nèi)置完善的動(dòng)態(tài)路由權(quán)限生成方案
• 組件 二次封裝了多個(gè)常用的組件

12.JeecgBoot-Vue3

github（1.9K） ：https://github.com/jeecgboot/jeecgboot-vue3

JeecgBoot—Vue3版前端源碼，采用 Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技術(shù)方案，包括二次封裝組件、utils、hooks、動(dòng)態(tài)菜單、權(quán)限校驗(yàn)、按鈕級別權(quán)限控制等功能。是JeecgBoot低代碼平臺(tái)的vue3技術(shù)棧的全新UI版本，功能強(qiáng)于vue2版。

JeecgBoot提供強(qiáng)大的代碼生成器讓前后端代碼一鍵生成! JeecgBoot引領(lǐng)低代碼開發(fā)模式(OnlineCoding-> 代碼生成-> 手工MERGE)， 幫助解決Java項(xiàng)目70%的重復(fù)工作，讓開發(fā)更多關(guān)注業(yè)務(wù)。既能快速提高效率，節(jié)省成本，同時(shí)又不失靈活性

支持的瀏覽器如下表所示：

13.kamiFaka

github（1.5K）：https://github.com/Baiyuetribe/kamiFaka

kamiFaka是一款基于VUE3.0的高顏值卡密發(fā)卡系統(tǒng)，特別適合虛擬商品、知識(shí)付費(fèi)等項(xiàng)目。

例如：各種電商、優(yōu)惠券、論壇邀請碼、充值卡、激活碼、注冊碼、騰訊愛奇藝積分CDK等，支持手工和全自動(dòng)發(fā)貨，還有類似1688的分層批發(fā)模式。

功能特性：

• Stisla UI：web界面很漂亮
• 前端使用VUE3.0,毫秒級響應(yīng)
• 已集成支付寶當(dāng)面付、微信官方、Payjs、虎皮椒、YunGouOS、易支付、Mugglepay、V免簽等十幾種支付接口
• 普通用戶支持郵箱、短信接收消息
• 管理員支持郵箱、短信、TG、微信、QQ通知
• 支持2~4層批發(fā)模式
• 長卡密可導(dǎo)出為txt文本
• 多種主題模式【列表、卡片、宮格】
• 支持自定義背景、logo、聯(lián)系方式等
• 支持熱備份，可一鍵云端備份、一鍵導(dǎo)出備份文件到本地
• 數(shù)據(jù)庫可分離，兼容Mysql、PostgreSQL和Sqlite
• 支持移動(dòng)端喚醒支付寶
• JWT認(rèn)證
• Limter保障服務(wù)器訪問頻率和次數(shù)
• 訪客與管理員頁面分離，可獨(dú)立定制

14.vue-naive-admin

GitHub（1.1K）：https://github.com/zclzone/vue-naive-admin

vue-naive-admin是一個(gè)基于 Vue3 + Vite + Pinia + Unocss + Naive UI 的輕量級后臺(tái)管理模板。開源免費(fèi)且允許商用 。相較于其他比較流行的后臺(tái)管理模板，此項(xiàng)目更加簡潔、輕量，風(fēng)格清新，上手成本非常低，非常適合中小型項(xiàng)目或者個(gè)人項(xiàng)目。