開箱即用，這些 Vue3 背景管理系統模闆絕對讓你爽歪歪

原文連結： Vue3 背景管理系統模闆推薦 | 唐志遠の部落格

之前寫了一篇關于 Vue2 的背景管理系統模闆的推薦，詳情請見 Vue背景管理系統模闆推薦 | 唐志遠の部落格 。

Vue3 在今年2月份已成為新的預設版本，本文收集了一些 Vue3 的背景管理系統模闆，分享給在座的仌（打勞工乃人上人）。

還是老規矩，按照 ​​Github​​ 星标數量來依次介紹。

個人較推薦 ​​vue-vben-admin​​​、​​vue-pure-admin​​​、​​naive-ui-admin​​​、​​vue3-composition-admin​​​、​​vue-next-admin​​。意見僅供參考，具體可根據團隊審美，業務需求選擇一款更契合的背景管理系統模闆。

gin-vue-admin (14.2k)

如果背景選擇的是go語言，可以考慮這一款。

​​gin-vue-admin​​（github上的标星數為14.2k）基于 vite + vue3 + gin 搭建的開發基礎平台（支援TS，JS 混用），內建 jwt鑒權，權限管理，動态路由，顯隐可控元件，分頁封裝，多點登入攔截，資源權限，上傳下載下傳，代碼生成器，表單生成器等開發必備功能。

相關位址

• 文檔位址：​​gin-vue-admin Documentation​​
• 倉庫位址：​​https://github.com/flipped-aurora/gin-vue-admin​​
• 預覽位址：​​http://demo.gin-vue-admin.com​​

技術選型

• 前端：用基于​​Vue​​​ 的​​Element​​ 建構基礎頁面。
• 後端：用​​Gin​​​ 快速搭建基礎 restful風格API，​​Gin​​ 是一個go語言編寫的Web架構。
• 資料庫：采用​​MySql​​​>5.7版本，資料庫引擎 innoDB，使用​​gorm​​​ 實作對資料庫的基本操作，已添加對​​sqlite資料庫​​的支援。
• 緩存：使用​​Redis​​​實作記錄目前活躍使用者的​​jwt​​令牌并實作多點登入限制。
• API文檔：使用​​Swagger​​建構自動化文檔。
• 配置檔案：使用​​fsnotify​​​ 和​​viper​​​ 實作​​yaml​​格式的配置檔案。
• 日志：使用​​zap​​ 實作日志記錄。

主要功能

• 權限管理：基于​​jwt​​​和​​casbin​​實作的權限管理
• 使用者管理：系統管理者配置設定使用者角色和角色權限。
• 角色管理：建立權限控制的主要對象，可以給角色配置設定不同api權限和菜單權限。
• 菜單管理：實作使用者動态菜單配置，實作不同角色不同菜單。
• api管理：不同使用者可調用的api接口的權限不同。
• 富文本編輯器：MarkDown編輯器功能嵌入。
• restful示例：可以參考使用者管理子產品中的示例API。
• 多點登入限制：需要在​​config.yaml​​​中把​​system​​​中的​​useMultipoint​​修改為true(需要自行配置Redis和Config中的Redis參數，測試階段，有bug請及時回報)。
• 表單生成器：表單生成器借助​​@form-generator​​。
• 代碼生成器：背景基礎邏輯以及簡單curd的代碼生成器等。

預覽效果

vue-vben-admin (13.5k)

​​Vue-Vben-Admin​​​（github上的标星數為13.5k）是一個基于 ​​Vue3.0​​​、​​Vite​​​、 ​​Ant-Design-Vue​​​、​​TypeScript​​ 的背景解決方案，目标是為開發中大型項目提供開箱即用的解決方案。包括二次封裝元件、utils、hooks、動态菜單、權限校驗、按鈕級别權限控制等功能。項目使用前端較新的技術棧，可以作為項目的啟動模版，以幫助你快速搭建企業級中背景産品原型。

相關位址

• 文檔位址：​​Vben Admin Documentation​​
• 倉庫位址：​​完整版​​​、​​簡化版​​
• 預覽位址：​​完整版​​​、​​簡化版​​

特點

• 最新技術棧：使用 Vue3/vite2 等前端前沿技術開發
• TypeScript: 應用程式級 JavaScript 的語言
• 主題：可配置的主題
• 國際化：内置完善的國際化方案
• Mock 資料 内置 Mock 資料方案
• 權限 内置完善的動态路由權限生成方案
• 元件 二次封裝了多個常用的元件

預覽效果

​

​

​

vue-admin-better (12.8k)

原 vue-admin-beauteful 。

​​vue-admin-better​​（github上的标星數為7.2k

相關位址

• ​​ Github倉庫位址​​
• ​​ Gitee倉庫位址​​
• ​​ vue2.x + element-ui（免費商用，支援 PC、平闆、手機）​​
• ​​⚡️ vue3.x + element-plus（alpha 版本，免費商用，支援 PC、平闆、手機）​​
• ​​⚡️ vue3.x + ant-design-vue（beta 版本，免費商用，支援 PC、平闆、手機）​​
• ​​⚡️ vue3.x + vite + arco​​
• ​​ admin pro 示範位址（vue2.x 付費版本，支援 PC、平闆、手機）​​
• ​​ admin plus 示範位址（vue3.x 付費版本，支援 PC、平闆、手機）​​
• ​​ pro 及 plus 購買位址 authorization​​

特性：

• 40+高品質單頁
• RBAC 模型 + JWT 權限控制
• 10 萬+ 項目實際應用
• 良好的類型定義
• 開源版本支援免費商用
• 跨平台 PC、手機端、平闆
• ️ 後端路由動态渲染

預覽效果：

vue-pure-admin (3.4k)

​​vue-pure-admin​​​（github上的标星數為3.4k）是一個免費開源的中背景模版。使用了最新的 ​​Vue 3​​​、​​Vite2​​​、​​Element Plus​​​ 、​​TypeScript​​、等主流技術開發，開箱即用的中背景前端解決方案，也可用于學習參考。

相關位址

• 文檔位址：​​Pure Admin Documentation​​
• 倉庫位址：​​完整版​​​、​​精簡版​​​、​​Tauri版​​
• 預覽位址：​​Pure Admin Preview​​

​​精簡版​​​ 是基于vue-pure-admin提煉出的架子，包含主體功能，更适合實際項目開發，打包後的大小僅 3MB。​​Tauri 版​​​ 比electron更強（​​tauri 與 electron 的對比​​​），如果沒有安裝tauri，請閱讀 ​​tauri官方文檔​​。

本地開發推薦使用 Chrome 80+ 浏覽器（不要用360、QQ等國内廠商浏覽器，懂得都懂），支援現代浏覽器，不支援 IE。

預覽效果

​

​

​

naive-ui-admin (2.8k)

​​Naive Ui Admin​​​（github上的标星數為2.8k）是一個基于 ​​Vue3.0​​​、​​Vite​​​、 ​​Naive UI​​​、​​TypeScript​​ 的中背景解決方案，它使用了最新的前端技術棧，并提煉了典型的業務模型，頁面，包括二次封裝元件、動态菜單、權限校驗、粒子化權限控制等功能，它可以幫助你快速搭建企業級中背景項目。

相關位址

• 文檔位址：​​naive-ui-admin Documentation​​
• 倉庫位址：​​https://github.com/jekip/naive-ui-admin​​
• 預覽位址：​​https://naive-ui-admin.vercel.app/​​

特性

• 二次封裝實用高擴充性元件
• 響應式、多主題，多配置，快速內建，開箱即用
• 最新技術棧，使用​​Vue3​​​、​​Typescript​​​、​​Pinia​​​、​​Vite​​等前端前沿技術
• 強大的鑒權系統，對路由、菜單、功能點等支援三種鑒權模式，滿足不同的業務鑒權需求
• 持續更新，實用性頁面模闆功能和互動，随意搭配組合，讓建構頁面變得簡單化

預覽效果

​

​

編輯切換為居中

添加圖檔注釋，不超過 140 字（可選）

Geeker-Admin (2.1k)

​​Geeker-Admin​​​（github上的标星數為2.1k）基于 ​​Vue3.2​​​、​​Vite2​​​、​​TypeScript​​​、​​Pinia​​​、​​Element Plus​​ 開源的一套背景管理模闆。

相關位址

• 更新日志：​​CHANGELOG.md​​
• 倉庫位址：​​https://github.com/HalseySpicy/Geeker-Admin​​
• 預覽位址：​​https://admin.spicyboy.cn​​

預覽效果

vue3-antd-admin (2k)

vue3-antd-admin（github上的标星數為2k）基于vue-cli5.x/vite2.x + vue3.x + ant-design-vue3.x + typescript hooks 的基礎背景管理系統模闆。 內建RBAC的權限系統，JSON Schema動态表單，動态表格，漂亮鎖屏界面等。

相關位址

• 文檔位址：​​vue3-antd-admin Documentation​​
• 倉庫位址：​​vue-cli版​​​、​​vite版​​
• 預覽位址：​​Gitee​​​、​​Vercel​​

預覽效果

​

vue3-composition-admin (1.9k)

項目的基礎版本出自于源于 ​​花褲衩​​​ 大佬的 ​​vue-element-admin​​。

​​vue3-composition-admin​​​（github上的标星數為1.9k）是一個背景前端解決方案，它基于 ​​vue​​​, ​​typescript​​​ 和 ​​element-ui​​ 實作，項目都是以composition api風格編寫。

本項目使用了最新的前端技術棧，内置了 i18 國際化解決方案，動态路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能元件，它可以幫助你快速搭建企業級背景産品原型。

相關位址

• 文檔位址：​​vue3-composition-admin Documentation​​
• 倉庫位址：​​https://github.com/RainManGO/vue3-composition-admin​​
• 預覽位址：​​https://admin-tmpl-test.rencaiyoujia.cn/​​

功能

- 使用者管理
  - 登入（視訊背景）
  - 登出
 
- 權限驗證
  - 頁面權限
  - 指令權限
  - 權限配置
  - 二步登入

- 全局功能
  - iconfont
  - 國際化多語言
  - 多種動态換膚
  - 動态側邊欄（支援多級路由嵌套）
  - 動态面包屑
  - 快捷導航(标簽頁)
  - 本地/後端 mock 資料
  - Screenfull全屏
  - 自适應收縮側邊欄

- 編輯器
  - 富文本

- Excel
  - 導出excel
  - 導入excel
  - 前端可視化excel
  - 導出zip

- 表格
  - 動态表格
  - 拖拽表格
  - 内聯編輯

- 錯誤頁面
  - 401
  - 404

- 組件
  - 頭像上傳
  - 傳回頂部
  - 拖拽Dialog
  - 拖拽Select
  - 拖拽看闆
  - 清單拖拽
  - Dropzone
  - Sticky
  - CountTo (to do)

- 綜合執行個體
- 錯誤日志
- Dashboard
- 引導頁
- ECharts 圖表
- Clipboard(剪貼複制)           

預覽效果

soybean-admin (1.3k)

​​Soybean Admin​​​（github上的标星數為1.3k）是一個基于 ​​Vue 3​​​、​​Vite3​​​、​​TypeScript​​​、​​NaiveUI​​​、​​Pinia​​ 和 UnoCSS 的清新優雅的中背景模版，它使用了最新的前端技術棧，内置豐富的主題配置，有着極高的代碼規範，基于 mock 實作的動态權限路由，開箱即用的中背景前端解決方案，也可用于學習參考。

相關位址

• 文檔位址：​​Soybean Admin Documentation​​
• 倉庫位址：​​Github​​​、​​Gitee​​
• 預覽位址：​​Gitee​​​、​​Vercel​​

特點

• 最新技術棧：使用 Vue3/Vite3 等前端前沿技術開發，使用高效率的 npm 包管理器 pnpm
• TypeScript：應用程式級 JavaScript 的語言
• 主題：豐富可配置的主題、暗黑模式，基于原子 css 架構 - UnoCSS 的動态主題顔色
• 代碼規範：豐富的規範插件及極高的代碼規範
• 權限路由：簡易的路由配置、基于 mock 的動态路由能快速實作後端動态路由
• 請求函數：基于 axios 的完善的請求函數封裝，提供 Promise 和 hooks 兩種請求函數，加入請求結果資料轉換的擴充卡

預覽效果

vue-admin-box (929)

​​vue-admin-box​​（github上的标星數為929）是一個免費并且開源的中背景管理系統模闆。使用最新版本的 vue3 + vite + element-plus 開發而成，目的是為了解決通用型的業務中背景系統複雜的配置。

相關位址

• Github倉庫位址：​​https://github.com/cmdparkour/vue-admin-box​​
• Gitee倉庫位址：​​https://gitee.com/cmdparkour/vue-admin-box​​
• 線上預覽位址：​​https://cmdparkour.github.io/vue-admin-box/dist/​​
• 國内使用者可通路該位址：​​https://cmdparkour.gitee.io/vue-admin-box/​​

特點

• 适合中背景開發的路由配置、狀态管理機制（狀态預設支援本地存儲）、已封裝完善的axios及api管理機制
• 極友善擴充的主題配置功能，預設支援三種典型的中背景風格
• 簡易配置的頁面緩存功能，隻需配置noCache屬性，無需配置其他的任何屬性，如元件名稱，路由名稱等等很多架構需要配置的東西
• 典型增删改查的三種業務表格，詳情請檢視“頁面欄目”内的“業務表格”、“分類關聯表格”、“樹關聯表格”
• 無路由跳轉的重新整理功能，支援緩存頁面重新整理，目前了解的多數架構都不支援緩存頁面的重新整理
• 友善擴充的國際化解決方案，并提供了兩套非國際化的基礎模闆和兩套國際化的基礎模闆（ts版本/js版本）
• 手寫版本的各類自定義指令
• 已經過多個中背景業務檢驗過的表格公用元件及彈窗公用元件，詳情請檢視“頁面欄目”内的“業務表格”、“分類關聯表格”、“樹關聯表格”

預覽效果

fantastic-admin (795)

​​Fantastic-admin​​​是一款開箱即用的 Vue 中背景管理系統架構。有 ​​vue2​​​（現已停止維護）和 ​​vue3​​ 的版本。

相關位址

• 技術棧：​​Vite​​​ +​​Vue 3​​​ (​​v3 遷移指南​​​) +​​Vue Router 4​​​ +​​Pinia​​​ +​​Element Plus​​
• 文檔位址：​​Fantastic-admin Documentation​​
• 倉庫位址：​​Github​​​、​​Gitee​​
• 預覽位址：​​基礎版​​​、​​專業版​​

特點

• 豐富的布局與主題，覆寫市面上各種中背景應用場景，相容PC、平闆和移動端
• 提供系統配置檔案，輕松實作個性化定制
• 精心設計的動效，讓每一處的動畫都幹淨利落
• 根據路由配置自動生成導航欄
• 基于檔案系統的路由
• 支援全方位權限驗證
• 内置多級路由最佳緩存方案
• 輕松實作國際化多語言适配
• 提供接近于浏覽器原生标簽欄操作體驗的标簽頁功能

預覽效果

基礎版：

專業版：

專業版與基礎版差別

⭐功能與服務⭐	基礎版	專業版
長期維護更新，提供新特性	✔️	✔️
定期修複 bug	✔️	✔️
開發與建構工具	Vue 3 / Vite 3	Vue 3 / Vite 3
UI 元件庫	Element Plus	Element Plus
頁面布局	3 套	20 套
主題風格	明亮 1 款 / 暗黑 1 款	明亮 6 款 / 暗黑 6 款
導航路由配置項	8 個	17 個
外鍊導航	✔️	✔️
内嵌導航	❌	✔️
Tab 标簽欄	❌	✔️
全方位權限驗證	✔️	✔️
擴充元件	12 個	20 個
國際化	❌	✔️
Mock 資料	✔️	✔️
錯誤日志上報	❌	✔️
檔案自動生成	支援部分	✔️
業務應用靜态頁面	❌	✔️
團隊代碼規範	✔️	✔️
架構版權資訊	需保留	可删除

vue-next-admin (498)

Gitee 上面的 stars 為 3.6k。

基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手機、平闆、pc 的背景開源免費模闆，希望減少工作量，幫助大家實作快速開發。

相關位址

• 倉庫位址：​​Github​​​、​​Gitee​​
• 預覽位址：​​vue-next-admin​​

效果預覽