Vue3 后臺管理系統(tǒng)模板推薦
原文鏈接：https://fe32.top/articles/xi3mpxmd/
更新記錄
2022-08-28
推薦一些 Vue3 常用后臺管理系統(tǒng)模板。
Vue3 在今年2月份已成為新的默認(rèn)版本，本文收集了一些 Vue3 的后臺管理系統(tǒng)模板，分享給在座的仌 ??。 還是老規(guī)矩，按照?Github?星標(biāo)數(shù)量來依次介紹。
個人較推薦?vue-vben-admin、vue-pure-admin、naive-ui-admin、vue3-composition-admin、vue-next-admin。意見僅供參考，具體可根據(jù)團(tuán)隊(duì)審美，業(yè)務(wù)需求選擇一款更契合的后臺管理系統(tǒng)模板。
gin-vue-admin (14.2k)
如果后臺選擇的是go語言，可以考慮這一款。
gin-vue-admin（github上的標(biāo)星數(shù)為14.2k）基于 vite + vue3 + gin 搭建的開發(fā)基礎(chǔ)平臺（支持TS，JS 混用），集成 jwt鑒權(quán)，權(quán)限管理，動態(tài)路由，顯隱可控組件，分頁封裝，多點(diǎn)登錄攔截，資源權(quán)限，上傳下載，代碼生成器，表單生成器等開發(fā)必備功能。
文檔地址：gin-vue-admin Documentation
倉庫地址：https://github.com/flipped-aurora/gin-vue-admin
預(yù)覽地址：http://demo.gin-vue-admin.com
技術(shù)選型:
前端：用基于 Vue 的 Element 構(gòu)建基礎(chǔ)頁面。
后端：用?Gin?快速搭建基礎(chǔ) restful風(fēng)格API，Gin 是一個go語言編寫的Web框架。
數(shù)據(jù)庫：采用 MySql>5.7 版本，數(shù)據(jù)庫引擎 innoDB，使用?gorm?實(shí)現(xiàn)對數(shù)據(jù)庫的基本操作，已添加對
sqlite數(shù)據(jù)庫的支持。緩存：使用
Redis實(shí)現(xiàn)記錄當(dāng)前活躍用戶的jwt令牌并實(shí)現(xiàn)多點(diǎn)登錄限制。API文檔：使用
Swagger構(gòu)建自動化文檔。配置文件：使用?fsnotify?和?viper?實(shí)現(xiàn)
yaml格式的配置文件。日志：使用?zap?實(shí)現(xiàn)日志記錄。
主要功能:
權(quán)限管理：基于
jwt和casbin實(shí)現(xiàn)的權(quán)限管理用戶管理：系統(tǒng)管理員分配用戶角色和角色權(quán)限。
角色管理：創(chuàng)建權(quán)限控制的主要對象，可以給角色分配不同api權(quán)限和菜單權(quán)限。
菜單管理：實(shí)現(xiàn)用戶動態(tài)菜單配置，實(shí)現(xiàn)不同角色不同菜單。
api管理：不同用戶可調(diào)用的api接口的權(quán)限不同。
富文本編輯器：MarkDown編輯器功能嵌入。
restful示例：可以參考用戶管理模塊中的示例API。
多點(diǎn)登錄限制：需要在
config.yaml中把system中的useMultipoint修改為true(需要自行配置Redis和Config中的Redis參數(shù)，測試階段，有bug請及時反饋)。表單生成器：表單生成器借助?@form-generator。
代碼生成器：后臺基礎(chǔ)邏輯以及簡單curd的代碼生成器等。
預(yù)覽效果:
?
?
?
vue-vben-admin (13.5k)
Vue-Vben-Admin（github上的標(biāo)星數(shù)為13.5k）是一個基于?Vue3.0、Vite、?Ant-Design-Vue、TypeScript?的后臺解決方案，目標(biāo)是為開發(fā)中大型項(xiàng)目提供開箱即用的解決方案。包括二次封裝組件、utils、hooks、動態(tài)菜單、權(quán)限校驗(yàn)、按鈕級別權(quán)限控制等功能。項(xiàng)目使用前端較新的技術(shù)棧，可以作為項(xiàng)目的啟動模版，以幫助你快速搭建企業(yè)級中后臺產(chǎn)品原型。
文檔地址：Vben Admin Documentation
倉庫地址：完整版、簡化版
預(yù)覽地址：完整版、簡化版
特點(diǎn):
最新技術(shù)棧：使用 Vue3/vite2 等前端前沿技術(shù)開發(fā)
TypeScript: 應(yīng)用程序級 JavaScript 的語言
主題：可配置的主題
國際化：內(nèi)置完善的國際化方案
Mock 數(shù)據(jù) 內(nèi)置 Mock 數(shù)據(jù)方案
權(quán)限 內(nèi)置完善的動態(tài)路由權(quán)限生成方案
組件 二次封裝了多個常用的組件
預(yù)覽效果:
?
?
?
?
?
vue-admin-better (12.8k)
原 vue-admin-beauteful 。
vue-admin-better（github上的標(biāo)星數(shù)為7.2k?12.8k）主線版本基于 element-plus、element-ui、ant-design-vue 三者并行開發(fā)維護(hù)，同時支持電腦，手機(jī)，平板。
相關(guān)地址:
?? Github倉庫地址
?? Gitee倉庫地址
?? vue2.x + element-ui（免費(fèi)商用，支持 PC、平板、手機(jī)）
?? vue3.x + element-plus（alpha 版本，免費(fèi)商用，支持 PC、平板、手機(jī)）
?? vue3.x + ant-design-vue（beta 版本，免費(fèi)商用，支持 PC、平板、手機(jī)）
?? vue3.x + vite + arco
?? admin pro 演示地址（vue2.x 付費(fèi)版本，支持 PC、平板、手機(jī)）
?? admin plus 演示地址（vue3.x 付費(fèi)版本，支持 PC、平板、手機(jī)）
?? pro 及 plus 購買地址 authorization
特性：
?? 40+高質(zhì)量單頁
?? RBAC 模型 + JWT 權(quán)限控制
?? 10 萬+ 項(xiàng)目實(shí)際應(yīng)用
?? 良好的類型定義
?? 開源版本支持免費(fèi)商用
?? 跨平臺 PC、手機(jī)端、平板
??? 后端路由動態(tài)渲染
預(yù)覽效果：
?
?
?
?
?
?
vue-pure-admin (3.4k)
vue-pure-admin（github上的標(biāo)星數(shù)為3.4k）是一個免費(fèi)開源的中后臺模版。使用了最新的?Vue 3、Vite2、Element Plus?、TypeScript、等主流技術(shù)開發(fā)，開箱即用的中后臺前端解決方案，也可用于學(xué)習(xí)參考。
相關(guān)地址:
文檔地址：Pure Admin Documentation
倉庫地址：完整版、精簡版、Tauri版
預(yù)覽地址：Pure Admin Preview
精簡版?是基于vue-pure-admin提煉出的架子，包含主體功能，更適合實(shí)際項(xiàng)目開發(fā)，打包后的大小僅 3MB。?Tauri 版?比electron更強(qiáng)（tauri 與 electron 的對比），如果沒有安裝tauri，請閱讀?tauri官方文檔。
本地開發(fā)推薦使用 Chrome 80+ 瀏覽器（不要用360、QQ等國內(nèi)廠商瀏覽器，懂得都懂），支持現(xiàn)代瀏覽器，不支持 IE。
預(yù)覽效果:
naive-ui-admin (2.8k)
Naive Ui Admin（github上的標(biāo)星數(shù)為2.8k）是一個基于?Vue3.0、Vite、?Naive UI、TypeScript?的中后臺解決方案，它使用了最新的前端技術(shù)棧，并提煉了典型的業(yè)務(wù)模型，頁面，包括二次封裝組件、動態(tài)菜單、權(quán)限校驗(yàn)、粒子化權(quán)限控制等功能，它可以幫助你快速搭建企業(yè)級中后臺項(xiàng)目。
文檔地址：naive-ui-admin Documentation
倉庫地址：https://github.com/jekip/naive-ui-admin
預(yù)覽地址：https://naive-ui-admin.vercel.app/
特性:
二次封裝實(shí)用高擴(kuò)展性組件
響應(yīng)式、多主題，多配置，快速集成，開箱即用
最新技術(shù)棧，使用
Vue3、Typescript、Pinia、Vite等前端前沿技術(shù)強(qiáng)大的鑒權(quán)系統(tǒng)，對路由、菜單、功能點(diǎn)等支持三種鑒權(quán)模式，滿足不同的業(yè)務(wù)鑒權(quán)需求
持續(xù)更新，實(shí)用性頁面模板功能和交互，隨意搭配組合，讓構(gòu)建頁面變得簡單化
預(yù)覽效果:
?
?
?
?
?
?
?
Geeker-Admin (2.1k)
Geeker-Admin（github上的標(biāo)星數(shù)為2.1k）基于?Vue3.2、Vite2、TypeScript、Pinia、Element Plus?開源的一套后臺管理模板。
更新日志：CHANGELOG.md
倉庫地址：https://github.com/HalseySpicy/Geeker-Admin
預(yù)覽地址：https://admin.spicyboy.cn
預(yù)覽效果:
?
?
?
?
vue3-antd-admin (2k)
vue3-antd-admin（github上的標(biāo)星數(shù)為2k）基于vue-cli5.x/vite2.x + vue3.x + ant-design-vue3.x + typescript hooks 的基礎(chǔ)后臺管理系統(tǒng)模板。 集成RBAC的權(quán)限系統(tǒng)，JSON Schema動態(tài)表單，動態(tài)表格，漂亮鎖屏界面等。
文檔地址：vue3-antd-admin Documentation
倉庫地址：vue-cli版、vite版
預(yù)覽地址：Gitee、Vercel
預(yù)覽效果:
?
?
?
vue3-composition-admin (1.9k)
項(xiàng)目的基礎(chǔ)版本出自于源于?花褲衩?大佬的?vue-element-admin。
vue3-composition-admin（github上的標(biāo)星數(shù)為1.9k）是一個后臺前端解決方案，它基于?vue,?typescript?和?element-ui?實(shí)現(xiàn)，項(xiàng)目都是以composition api風(fēng)格編寫。
本項(xiàng)目使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國際化解決方案，動態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級后臺產(chǎn)品原型。
文檔地址：vue3-composition-admin Documentation
倉庫地址：https://github.com/RainManGO/vue3-composition-admin
預(yù)覽地址：https://admin-tmpl-test.rencaiyoujia.cn/
預(yù)覽效果"
?
?
?
?
soybean-admin (1.3k)
Soybean Admin（github上的標(biāo)星數(shù)為1.3k）是一個基于?Vue 3、Vite3、TypeScript、NaiveUI、Pinia?和 UnoCSS 的清新優(yōu)雅的中后臺模版，它使用了最新的前端技術(shù)棧，內(nèi)置豐富的主題配置，有著極高的代碼規(guī)范，基于 mock 實(shí)現(xiàn)的動態(tài)權(quán)限路由，開箱即用的中后臺前端解決方案，也可用于學(xué)習(xí)參考。
文檔地址：Soybean Admin Documentation
倉庫地址：Github、Gitee
預(yù)覽地址：Gitee、Vercel
特點(diǎn):
最新技術(shù)棧：使用 Vue3/Vite3 等前端前沿技術(shù)開發(fā)，使用高效率的 npm 包管理器 pnpm
TypeScript：應(yīng)用程序級 JavaScript 的語言
主題：豐富可配置的主題、暗黑模式，基于原子 css 框架 - UnoCSS 的動態(tài)主題顏色
代碼規(guī)范：豐富的規(guī)范插件及極高的代碼規(guī)范
權(quán)限路由：簡易的路由配置、基于 mock 的動態(tài)路由能快速實(shí)現(xiàn)后端動態(tài)路由
請求函數(shù)：基于 axios 的完善的請求函數(shù)封裝，提供 Promise 和 hooks 兩種請求函數(shù)，加入請求結(jié)果數(shù)據(jù)轉(zhuǎn)換的適配器
預(yù)覽效果:
?
?
?
?
?
?
?
?
vue-admin-box (929)
vue-admin-box（github上的標(biāo)星數(shù)為929）是一個免費(fèi)并且開源的中后臺管理系統(tǒng)模板。使用最新版本的 vue3 + vite + element-plus 開發(fā)而成，目的是為了解決通用型的業(yè)務(wù)中后臺系統(tǒng)復(fù)雜的配置。
Github倉庫地址：https://github.com/cmdparkour/vue-admin-box
Gitee倉庫地址：https://gitee.com/cmdparkour/vue-admin-box
在線預(yù)覽地址：https://cmdparkour.github.io/vue-admin-box/dist/
國內(nèi)用戶可訪問該地址：https://cmdparkour.gitee.io/vue-admin-box/
特點(diǎn):
適合中后臺開發(fā)的路由配置、狀態(tài)管理機(jī)制（狀態(tài)默認(rèn)支持本地存儲）、已封裝完善的axios及api管理機(jī)制
極方便擴(kuò)展的主題配置功能，默認(rèn)支持三種典型的中后臺風(fēng)格
簡易配置的頁面緩存功能，只需配置noCache屬性，無需配置其他的任何屬性，如組件名稱，路由名稱等等很多框架需要配置的東西
典型增刪改查的三種業(yè)務(wù)表格，詳情請查看“頁面欄目”內(nèi)的“業(yè)務(wù)表格”、“分類聯(lián)動表格”、“樹聯(lián)動表格”
無路由跳轉(zhuǎn)的刷新功能，支持緩存頁面刷新，目前了解的多數(shù)框架都不支持緩存頁面的刷新
方便擴(kuò)展的國際化解決方案，并提供了兩套非國際化的基礎(chǔ)模板和兩套國際化的基礎(chǔ)模板（ts版本/js版本）
手寫版本的各類自定義指令
已經(jīng)過多個中后臺業(yè)務(wù)檢驗(yàn)過的表格公用組件及彈窗公用組件，詳情請查看“頁面欄目”內(nèi)的“業(yè)務(wù)表格”、“分類聯(lián)動表格”、“樹聯(lián)動表格”
預(yù)覽效果"
?
?
?
?
?
?
fantastic-admin (795)
Fantastic-admin是一款開箱即用的 Vue 中后臺管理系統(tǒng)框架。有?vue2（現(xiàn)已停止維護(hù)）和?vue3?的版本。
技術(shù)棧：Vite?+?Vue 3?(v3 遷移指南) +?Vue Router 4?+?Pinia?+?Element Plus
文檔地址：Fantastic-admin Documentation
倉庫地址：Github、Gitee
預(yù)覽地址：基礎(chǔ)版、專業(yè)版
特點(diǎn):
豐富的布局與主題，覆蓋市面上各種中后臺應(yīng)用場景，兼容PC、平板和移動端
提供系統(tǒng)配置文件，輕松實(shí)現(xiàn)個性化定制
精心設(shè)計(jì)的動效，讓每一處的動畫都干凈利落
根據(jù)路由配置自動生成導(dǎo)航欄
基于文件系統(tǒng)的路由
支持全方位權(quán)限驗(yàn)證
內(nèi)置多級路由最佳緩存方案
輕松實(shí)現(xiàn)國際化多語言適配
提供接近于瀏覽器原生標(biāo)簽欄操作體驗(yàn)的標(biāo)簽頁功能
基礎(chǔ)版預(yù)覽效果：
?
?
?
?
?
專業(yè)版預(yù)覽效果：
?
?
?
?
?
?
vue-next-admin (498)
Gitee 上面的 stars 為 3.6k。
基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，適配手機(jī)、平板、pc 的后臺開源免費(fèi)模板，希望減少工作量，幫助大家實(shí)現(xiàn)快速開發(fā)。
倉庫地址：Github、Gitee
預(yù)覽地址：vue-next-admin
效果預(yù)覽:
?
?
?
?
