更新記錄

2022-08-28

1. 推薦一些 Vue3 常用后臺(tái)管理系統(tǒng)模板。

Vue3 在今年2月份已成為新的默認(rèn)版本，本文收集了一些 Vue3 的后臺(tái)管理系統(tǒng)模板，分享給在座的仌 ??。 還是老規(guī)矩，按照 Github 星標(biāo)數(shù)量來依次介紹。

個(gè)人較推薦 vue-vben-admin、vue-pure-admin、naive-ui-admin、vue3-composition-admin、vue-next-admin。意見僅供參考，具體可根據(jù)團(tuán)隊(duì)審美，業(yè)務(wù)需求選擇一款更契合的后臺(tái)管理系統(tǒng)模板。

gin-vue-admin (14.2k)

如果后臺(tái)選擇的是go語言，可以考慮這一款。

gin-vue-admin（github上的標(biāo)星數(shù)為14.2k）基于 vite + vue3 + gin 搭建的開發(fā)基礎(chǔ)平臺(tái)（支持TS，JS 混用），集成 jwt鑒權(quán)，權(quán)限管理，動(dòng)態(tài)路由，顯隱可控組件，分頁封裝，多點(diǎn)登錄攔截，資源權(quán)限，上傳下載，代碼生成器，表單生成器等開發(fā)必備功能。

• 文檔地址：gin-vue-admin Documentation
• 倉庫地址：github.com/flipped-aur…
• 預(yù)覽地址：demo.gin-vue-admin.com

技術(shù)選型:

• 前端：用基于 Vue 的 Element 構(gòu)建基礎(chǔ)頁面。
• 后端：用 Gin 快速搭建基礎(chǔ) restful風(fēng)格API，Gin 是一個(gè)go語言編寫的Web框架。
• 數(shù)據(jù)庫：采用 MySql>5.7 版本，數(shù)據(jù)庫引擎 innoDB，使用 gorm 實(shí)現(xiàn)對(duì)數(shù)據(jù)庫的基本操作，已添加對(duì)sqlite數(shù)據(jù)庫的支持。
• 緩存：使用Redis實(shí)現(xiàn)記錄當(dāng)前活躍用戶的jwt令牌并實(shí)現(xiàn)多點(diǎn)登錄限制。
• API文檔：使用Swagger構(gòu)建自動(dòng)化文檔。
• 配置文件：使用 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)限控制的主要對(duì)象，可以給角色分配不同api權(quán)限和菜單權(quán)限。
• 菜單管理：實(shí)現(xiàn)用戶動(dòng)態(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ù)，測(cè)試階段，有bug請(qǐng)及時(shí)反饋)。
• 表單生成器：表單生成器借助 @form-generator。
• 代碼生成器：后臺(tái)基礎(chǔ)邏輯以及簡(jiǎn)單curd的代碼生成器等。

預(yù)覽效果:

vue-vben-admin (13.5k)

Vue-Vben-Admin（github上的標(biāo)星數(shù)為13.5k）是一個(gè)基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后臺(tái)解決方案，目標(biāo)是為開發(fā)中大型項(xiàng)目提供開箱即用的解決方案。包括二次封裝組件、utils、hooks、動(dòng)態(tài)菜單、權(quán)限校驗(yàn)、按鈕級(jí)別權(quán)限控制等功能。項(xiàng)目使用前端較新的技術(shù)棧，可以作為項(xiàng)目的啟動(dòng)模版，以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。

• 文檔地址：Vben Admin Documentation
• 倉庫地址：完整版、簡(jiǎn)化版
• 預(yù)覽地址：完整版、簡(jiǎn)化版

特點(diǎn):

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

預(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ù)，同時(shí)支持電腦，手機(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)商用
• ?? 跨平臺(tái) PC、手機(jī)端、平板
• ??? 后端路由動(dòng)態(tài)渲染

預(yù)覽效果：

vue-pure-admin (3.4k)

vue-pure-admin（github上的標(biāo)星數(shù)為3.4k）是一個(gè)免費(fèi)開源的中后臺(tái)模版。使用了最新的 Vue 3、Vite2、Element Plus 、TypeScript、等主流技術(shù)開發(fā)，開箱即用的中后臺(tái)前端解決方案，也可用于學(xué)習(xí)參考。

相關(guān)地址:

• 文檔地址：Pure Admin Documentation
• 倉庫地址：完整版、精簡(jiǎn)版、Tauri版
• 預(yù)覽地址：Pure Admin Preview

精簡(jiǎn)版 是基于vue-pure-admin提煉出的架子，包含主體功能，更適合實(shí)際項(xiàng)目開發(fā)，打包后的大小僅 3MB。 Tauri 版 比electron更強(qiáng)（tauri 與 electron 的對(duì)比），如果沒有安裝tauri，請(qǐng)閱讀 tauri官方文檔。

本地開發(fā)推薦使用 Chrome 80+ 瀏覽器（不要用360、QQ等國(guó)內(nèi)廠商瀏覽器，懂得都懂），支持現(xiàn)代瀏覽器，不支持 IE。

預(yù)覽效果:

naive-ui-admin (2.8k)

Naive Ui Admin（github上的標(biāo)星數(shù)為2.8k）是一個(gè)基于 Vue3.0、Vite、 Naive UI、TypeScript 的中后臺(tái)解決方案，它使用了最新的前端技術(shù)棧，并提煉了典型的業(yè)務(wù)模型，頁面，包括二次封裝組件、動(dòng)態(tài)菜單、權(quán)限校驗(yàn)、粒子化權(quán)限控制等功能，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)項(xiàng)目。

• 文檔地址：naive-ui-admin Documentation
• 倉庫地址：github.com/jekip/naive…
• 預(yù)覽地址：naive-ui-admin.vercel.app/

特性:

• 二次封裝實(shí)用高擴(kuò)展性組件
• 響應(yīng)式、多主題，多配置，快速集成，開箱即用
• 最新技術(shù)棧，使用Vue3、Typescript、Pinia、Vite等前端前沿技術(shù)
• 強(qiáng)大的鑒權(quán)系統(tǒng)，對(duì)路由、菜單、功能點(diǎn)等支持三種鑒權(quán)模式，滿足不同的業(yè)務(wù)鑒權(quán)需求
• 持續(xù)更新，實(shí)用性頁面模板功能和交互，隨意搭配組合，讓構(gòu)建頁面變得簡(jiǎn)單化

預(yù)覽效果:

Geeker-Admin (2.1k)

Geeker-Admin（github上的標(biāo)星數(shù)為2.1k）基于 Vue3.2、Vite2、TypeScript、Pinia、Element Plus 開源的一套后臺(tái)管理模板。

• 更新日志：CHANGELOG.md
• 倉庫地址：github.com/HalseySpicy…
• 預(yù)覽地址：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ái)管理系統(tǒng)模板。 集成RBAC的權(quán)限系統(tǒng)，JSON Schema動(dòng)態(tài)表單，動(dòng)態(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）是一個(gè)后臺(tái)前端解決方案，它基于 vue, typescript 和 element-ui 實(shí)現(xiàn)，項(xiàng)目都是以composition api風(fēng)格編寫。

本項(xiàng)目使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)后臺(tái)產(chǎn)品原型。

• 文檔地址：vue3-composition-admin Documentation
• 倉庫地址：github.com/RainManGO/v…
• 預(yù)覽地址：admin-tmpl-test.rencaiyoujia.cn/

預(yù)覽效果"

soybean-admin (1.3k)

Soybean Admin（github上的標(biāo)星數(shù)為1.3k）是一個(gè)基于 Vue 3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新優(yōu)雅的中后臺(tái)模版，它使用了最新的前端技術(shù)棧，內(nèi)置豐富的主題配置，有著極高的代碼規(guī)范，基于 mock 實(shí)現(xiàn)的動(dòng)態(tài)權(quán)限路由，開箱即用的中后臺(tái)前端解決方案，也可用于學(xué)習(xí)參考。

• 文檔地址：Soybean Admin Documentation
• 倉庫地址：Github、Gitee
• 預(yù)覽地址：Gitee、Vercel

特點(diǎn):

• 最新技術(shù)棧：使用 Vue3/Vite3 等前端前沿技術(shù)開發(fā)，使用高效率的 npm 包管理器 pnpm
• TypeScript：應(yīng)用程序級(jí) JavaScript 的語言
• 主題：豐富可配置的主題、暗黑模式，基于原子 css 框架 - UnoCSS 的動(dòng)態(tài)主題顏色
• 代碼規(guī)范：豐富的規(guī)范插件及極高的代碼規(guī)范
• 權(quán)限路由：簡(jiǎn)易的路由配置、基于 mock 的動(dòng)態(tài)路由能快速實(shí)現(xiàn)后端動(dòng)態(tài)路由
• 請(qǐng)求函數(shù)：基于 axios 的完善的請(qǐng)求函數(shù)封裝，提供 Promise 和 hooks 兩種請(qǐng)求函數(shù)，加入請(qǐng)求結(jié)果數(shù)據(jù)轉(zhuǎn)換的適配器

預(yù)覽效果:

vue-admin-box (929)

vue-admin-box（github上的標(biāo)星數(shù)為929）是一個(gè)免費(fèi)并且開源的中后臺(tái)管理系統(tǒng)模板。使用最新版本的 vue3 + vite + element-plus 開發(fā)而成，目的是為了解決通用型的業(yè)務(wù)中后臺(tái)系統(tǒng)復(fù)雜的配置。

• Github倉庫地址：github.com/cmdparkour/…
• Gitee倉庫地址：gitee.com/cmdparkour/…
• 在線預(yù)覽地址：cmdparkour.github.io/vue-admin-b…
• 國(guó)內(nèi)用戶可訪問該地址：cmdparkour.gitee.io/vue-admin-b…

特點(diǎn):

• 適合中后臺(tái)開發(fā)的路由配置、狀態(tài)管理機(jī)制（狀態(tài)默認(rèn)支持本地存儲(chǔ)）、已封裝完善的axios及api管理機(jī)制
• 極方便擴(kuò)展的主題配置功能，默認(rèn)支持三種典型的中后臺(tái)風(fēng)格
• 簡(jiǎn)易配置的頁面緩存功能，只需配置noCache屬性，無需配置其他的任何屬性，如組件名稱，路由名稱等等很多框架需要配置的東西
• 典型增刪改查的三種業(yè)務(wù)表格，詳情請(qǐng)查看“頁面欄目”內(nèi)的“業(yè)務(wù)表格”、“分類聯(lián)動(dòng)表格”、“樹聯(lián)動(dòng)表格”
• 無路由跳轉(zhuǎn)的刷新功能，支持緩存頁面刷新，目前了解的多數(shù)框架都不支持緩存頁面的刷新
• 方便擴(kuò)展的國(guó)際化解決方案，并提供了兩套非國(guó)際化的基礎(chǔ)模板和兩套國(guó)際化的基礎(chǔ)模板（ts版本/js版本）
• 手寫版本的各類自定義指令
• 已經(jīng)過多個(gè)中后臺(tái)業(yè)務(wù)檢驗(yàn)過的表格公用組件及彈窗公用組件，詳情請(qǐng)查看“頁面欄目”內(nèi)的“業(yè)務(wù)表格”、“分類聯(lián)動(dòng)表格”、“樹聯(lián)動(dòng)表格”

預(yù)覽效果"

fantastic-admin (795)

Fantastic-admin是一款開箱即用的 Vue 中后臺(tái)管理系統(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):

• 豐富的布局與主題，覆蓋市面上各種中后臺(tái)應(yīng)用場(chǎng)景，兼容PC、平板和移動(dòng)端
• 提供系統(tǒng)配置文件，輕松實(shí)現(xiàn)個(gè)性化定制
• 精心設(shè)計(jì)的動(dòng)效，讓每一處的動(dòng)畫都干凈利落
• 根據(jù)路由配置自動(dòng)生成導(dǎo)航欄
• 基于文件系統(tǒng)的路由
• 支持全方位權(quán)限驗(yàn)證
• 內(nèi)置多級(jí)路由最佳緩存方案
• 輕松實(shí)現(xiàn)國(guó)際化多語言適配
• 提供接近于瀏覽器原生標(biāo)簽欄操作體驗(yàn)的標(biāo)簽頁功能

基礎(chǔ)版預(yù)覽效果：

專業(yè)版預(yù)覽效果：

專業(yè)版與基礎(chǔ)版區(qū)別:

vue-next-admin (498)

Gitee 上面的 stars 為 3.6k。

基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，適配手機(jī)、平板、pc 的后臺(tái)開源免費(fèi)模板，希望減少工作量，幫助大家實(shí)現(xiàn)快速開發(fā)。

• 倉庫地址：Github、Gitee
• 預(yù)覽地址：vue-next-admin

效果預(yù)覽:

作者：唐志遠(yuǎn)
鏈接：https://juejin.cn/post/7138697862749093902
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。文章來源地址http://www.zghlxwxcb.cn/news/detail-775670.html

到了這里，關(guān)于vue3開源后臺(tái)管理系統(tǒng)模板的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！