> 原文链接：[Vue3 后台管理系统模板推荐](https://fe32.top/articles/xi3mpxmd/)。 ## 更新记录 > 2025-05-12 > > 1. 更新stars数量。 > 2022-08-28 > > 1. 推荐一些 Vue3 常用后台管理系统模板。 Vue3 在今年2月份已成为新的默认版本，本文收集了一些 Vue3 的后台管理系统模板，分享给在座的仌 👣。还是老规矩，按照 [Github](https://github.com/) 星标数量来依次介绍。个人较推荐 [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin)、[vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin)、[naive-ui-admin](https://github.com/jekip/naive-ui-admin)、[vue3-composition-admin](https://github.com/RainManGO/vue3-composition-admin)、[vue-next-admin](https://github.com/lyt-Top/vue-next-admin)。意见仅供参考，具体可根据团队审美，业务需求选择一款更契合的后台管理系统模板。 ## vue-vben-admin (28.1k) [Vue-Vben-Admin](https://github.com/vbenjs/vue-vben-admin)（github上的标星数为~~20.3k~~ 28.1k）是一个基于是一个基于 [Vue3.0](https://github.com/vuejs/core)、[Vite](https://github.com/vitejs/vite)、 [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/)、[TypeScript](https://www.typescriptlang.org/) 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。 * 文档地址：[Vben Admin Documentation](https://vvbin.cn/doc-next/) * 仓库地址：[完整版](https://github.com/vbenjs/vue-vben-admin)、[简化版](https://github.com/vbenjs/vben-admin-thin-next) * 预览地址：[完整版](https://vvbin.cn/next/)、[简化版](https://vvbin.cn/thin/next/) 特点: * 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发 * TypeScript: 应用程序级 JavaScript 的语言 * 主题：可配置的主题 * 国际化：内置完善的国际化方案 * Mock 数据内置 Mock 数据方案 * 权限内置完善的动态路由权限生成方案 * 组件二次封装了多个常用的组件预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eed279da1d0a47738abcedc0f9d80758~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=22939\&e=png\&b=fefefe) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c9b740226a941e4a26ba692b79a53ac~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=32284\&e=png\&b=fdfdfd) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f219a78450d433796b846187dd1c4ba~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=43379\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6564658879f4108af06dc140bec635a~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=35919\&e=png\&b=0f0f0f) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b65d3ba2925d4637baae7cdaeb1fb537~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=213149\&e=png\&b=f6f3ee) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cfc3ee10e06f465883ff0573b8a38479~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=26781\&e=png\&b=151515) ## gin-vue-admin (22.8k) > 如果后台选择的是go语言，可以考虑这一款。 [gin-vue-admin](https://github.com/flipped-aurora/gin-vue-admin)（github上的标星数为~~18.7k~~ 22.8k）基于 vite + vue3 + gin 搭建的开发基础平台（支持TS，JS 混用），集成 jwt鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。 * 文档地址：[gin-vue-admin Documentation](https://www.gin-vue-admin.com/) * 仓库地址： * 预览地址：技术选型: * 前端：用基于 Vue 的 Element 构建基础页面。 * 后端：用 [Gin](https://gin-gonic.com/) 快速搭建基础 restful风格API，Gin 是一个go语言编写的Web框架。 * 数据库：采用 MySql>5.7 版本，数据库引擎 innoDB，使用 [gorm](http://gorm.cn/) 实现对数据库的基本操作，已添加对`sqlite数据库`的支持。 * 缓存：使用`Redis`实现记录当前活跃用户的`jwt`令牌并实现多点登录限制。 * API文档：使用`Swagger`构建自动化文档。 * 配置文件：使用 [fsnotify](https://github.com/fsnotify/fsnotify) 和 [viper](https://github.com/spf13/viper) 实现`yaml`格式的配置文件。 * 日志：使用 [zap](https://github.com/uber-go/zap) 实现日志记录。主要功能: * 权限管理：基于`jwt`和`casbin`实现的权限管理 * 用户管理：系统管理员分配用户角色和角色权限。 * 角色管理：创建权限控制的主要对象，可以给角色分配不同api权限和菜单权限。 * 菜单管理：实现用户动态菜单配置，实现不同角色不同菜单。 * api管理：不同用户可调用的api接口的权限不同。 * 富文本编辑器：MarkDown编辑器功能嵌入。 * restful示例：可以参考用户管理模块中的示例API。 * 多点登录限制：需要在`config.yaml`中把`system`中的`useMultipoint`修改为true(需要自行配置Redis和Config中的Redis参数，测试阶段，有bug请及时反馈)。 * 表单生成器：表单生成器借助 [@form-generator](https://github.com/JakHuang/form-generator)。 * 代码生成器：后台基础逻辑以及简单curd的代码生成器等。预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69ea3f6ea36a4b62b04fc10cf18bc959~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=37851\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b44d23822de042efb9f155c9b68ad7d9~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=29873\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/286916253a0f4b9d988a294aa8e84dbd~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=35300\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e476c930ed7f4109b9c843516908db24~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=36399\&e=png\&b=ffffff) ## vue-pure-admin (18k) [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin)（github上的标星数为~~11.1k~~ 18k）是一个免费开源的中后台模版。使用了最新的 [Vue 3](https://v3.cn.vuejs.org/)、[Vite2](https://cn.vitejs.dev/)、[Element Plus](https://element-plus.org/#/zh-CN) 、[TypeScript](https://www.tslang.cn/)、等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。相关地址: * 文档地址：[Pure Admin Documentation](https://pure-admin-doc.vercel.app/) * 仓库地址：[完整版](https://github.com/xiaoxian521/vue-pure-admin)、[精简版](https://github.com/xiaoxian521/pure-admin-thin)、[Tauri版](https://github.com/xiaoxian521/tauri-pure-admin) * 预览地址：[Pure Admin Preview](https://vue-pure-admin.vercel.app/) > [精简版](https://github.com/xiaoxian521/pure-admin-thin) 是基于vue-pure-admin提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小仅 3MB。 > [Tauri 版](https://github.com/xiaoxian521/tauri-pure-admin) 比electron更强（[tauri 与 electron 的对比](https://www.cnblogs.com/Grewer/p/12789261.html)），如果没有安装tauri，请阅读 [tauri官方文档](https://tauri.studio/v1/guides/getting-started/prerequisites)。本地开发推荐使用 Chrome 80+ 浏览器（不要用360、QQ等国内厂商浏览器，懂得都懂），支持现代浏览器，不支持 IE。预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec94053124454a92a7e8641e0844bf10~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=42166\&e=png\&b=fefefe) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af58b3da7d0d46a1ab86e6b728a0dc32~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=36428\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5a66681c51a461ab0f304b1e13f2e39~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=41762\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c75cd182e2244332895359bb915d083d~tplv-k3u1fbpfcp-zoom-1.image#?w=1184\&h=666\&s=631967\&e=png\&b=fcf9f9) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be4b0e84ea854db495f5e7fe155c31f7~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=182443\&e=png\&b=f5f2f1) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5b1a076922c410aae02e84bcfdd954c~tplv-k3u1fbpfcp-zoom-1.image#?w=2250\&h=4002\&s=549259\&e=png\&b=fcfcfc) ## vue-admin-better (17.6k) > 原 vue-admin-beauteful 。 [vue-admin-better](https://github.com/chuzhixin/vue-admin-better "Vue-Admin-Better")（github上的标星数为~~7.2k~~ 12.8k）主线版本基于 element-plus、element-ui、ant-design-vue 三者并行开发维护，同时支持电脑，手机，平板。相关地址: * [🌐 Github仓库地址](https://github.com/chuzhixin/vue-admin-better) * [🌐 Gitee仓库地址](https://gitee.com/chu1204505056/vue-admin-better) * [🎉 vue2.x + element-ui（免费商用，支持 PC、平板、手机）](https://vue-admin-beautiful.com/vue-admin-beautiful-element/) * [⚡️ vue3.x + element-plus（alpha 版本，免费商用，支持 PC、平板、手机）](https://vue-admin-beautiful.com/vue-admin-beautiful-element-plus/) * [⚡️ vue3.x + ant-design-vue（beta 版本，免费商用，支持 PC、平板、手机）](https://vue-admin-beautiful.com/vue-admin-beautiful-antdv/) * [⚡️ vue3.x + vite + arco](https://vue-admin-beautiful.com/vue-admin-arco/) * [🚀 admin pro 演示地址（vue2.x 付费版本，支持 PC、平板、手机）](https://vue-admin-beautiful.com/admin-pro/) * [🚀 admin plus 演示地址（vue3.x 付费版本，支持 PC、平板、手机）](https://vue-admin-beautiful.com/admin-plus/) * [📌 pro 及 plus 购买地址 authorization](https://vue-admin-beautiful.com/authorization/) 特性： * 💪 40+高质量单页 * 💅 RBAC 模型 + JWT 权限控制 * 🌍 10 万+ 项目实际应用 * 👏 良好的类型定义 * 🥳 开源版本支持免费商用 * 🚀 跨平台 PC、手机端、平板 * 📦️ 后端路由动态渲染预览效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7425db95713744cc816b507c677b0644~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=938\&s=50536\&e=png\&b=fefefe) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c793f244f4045d9acca13ad89928a88~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=939\&s=93350\&e=webp\&b=f0eae7) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6b6e938150cd4c558d56dfee0f38b3bc~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=939\&s=78874\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfb9bb3eb5b04107a2cd6336e51a6309~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=939\&s=46408\&e=webp\&b=fefefe) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8e0a0f474354009b85aa7acf8d159b8~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=939\&s=42325\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea296fb4219e40f4a9f65096011d22c9~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=937\&s=111568\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/597df031e2bf4d3faa3674d7253d9e36~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=937\&s=85737\&e=png\&b=807f7f) ## soybean-admin (12.1k) [Soybean Admin](https://github.com/honghuangdc/soybean-admin)（github上的标星数为~~5.7k~~ 12.1k）是一个基于 [Vue 3](https://v3.cn.vuejs.org/)、[Vite3](https://cn.vitejs.dev/)、[TypeScript](https://www.tslang.cn/)、[NaiveUI](https://www.naiveui.com/)、[Pinia](https://pinia.vuejs.org/) 和 UnoCSS 的清新优雅的中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于 mock 实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。 * 文档地址：[Soybean Admin Documentation](https://docs.soybeanjs.cn/) * 仓库地址：[Github](https://github.com/soybeanjs/soybean-admin)、[Gitee](https://gitee.com/honghuangdc/soybean-admin) * 预览地址：[NaiveUI 版本](https://naive.soybeanjs.cn/) 特点: * 最新技术栈：使用 Vue3/Vite3 等前端前沿技术开发，使用高效率的 npm 包管理器 pnpm * TypeScript：应用程序级 JavaScript 的语言 * 主题：丰富可配置的主题、暗黑模式，基于原子 css 框架 - UnoCSS 的动态主题颜色 * 代码规范：丰富的规范插件及极高的代码规范 * 权限路由：简易的路由配置、基于 mock 的动态路由能快速实现后端动态路由 * 请求函数：基于 axios 的完善的请求函数封装，提供 Promise 和 hooks 两种请求函数，加入请求结果数据转换的适配器预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad6608694e8843f1b0411547f52626cd~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2492\&s=192192\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5169f677c0584b9aa0f2a1ddddc1b5ef~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2492\&s=202479\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3b4a41cb9b043baabb021362eddbd6e~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2492\&s=182754\&e=png\&b=17171b) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/529a9d48e0c643e8a4a3a93e670b969d~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2492\&s=135078\&e=png\&b=b4b6b5) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/677f7fa02d724fb5a809167492e92038~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2492\&s=585350\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39567f99e1704fa290c40cc53e0f534e~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2492\&s=226455\&e=png\&b=818181) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/efe736701d5142b7a77e5b976dffa706~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2490\&s=115923\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/401f6d55f04f40abb39d64461c0304ad~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2490\&s=153066\&e=png\&b=18181c) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e68f380a5d34e30be89c157f6be0029~tplv-k3u1fbpfcp-zoom-1.image#?w=3600\&h=2490\&s=145086\&e=png\&b=ffffff) ## Geeker-Admin (7.7k) [Geeker-Admin](https://github.com/HalseySpicy/Geeker-Admin)（github上的标星数为~~5.3k~~ 7.7k）基于 [Vue3.2](https://v3.cn.vuejs.org/)、[Vite2](https://cn.vitejs.dev/)、[TypeScript](https://www.tslang.cn/)、[Pinia](https://pinia.vuejs.org/)、[Element Plus](https://element-plus.org/#/zh-CN) 开源的一套后台管理模板。 * 更新日志：[CHANGELOG.md](https://github.com/HalseySpicy/Geeker-Admin/blob/master/CHANGELOG.md) * 仓库地址： * 预览地址：预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/38950f391fb64409a1eee8d3243e62be~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=61056\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb73d095f64144f688900b76c179681a~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=66278\&e=png\&b=141414) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cf9a777c7664b168bace92db464d0a1~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=70705\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c43ab9efd0a4c46b08d37015dd38c98~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=68073\&e=png\&b=141414) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71341422dbaf48c18c7d8f3be57ba55c~tplv-k3u1fbpfcp-zoom-1.image#?w=2002\&h=937\&s=63599\&e=png\&b=ffffff) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08800d99d11b470b89fad0f7993311cc~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=937\&s=60179\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a94c66fca04f45e7b617e3905b28fa40~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=359094\&e=png) ## naive-ui-admin (5.3k) [Naive Ui Admin](https://github.com/jekip/naive-ui-admin)（github上的标星数为~~4.2k~~ 5.3k）是一个基于 [Vue3.0](https://github.com/vuejs/vue-next)、[Vite](https://github.com/vitejs/vite)、 [Naive UI](https://www.naiveui.com/)、[TypeScript](https://www.typescriptlang.org/) 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目。 * 文档地址：[naive-ui-admin Documentation](https://naive-ui-admin-docs.vercel.app/) * 仓库地址： * 预览地址：特性: * 二次封装实用高扩展性组件 * 响应式、多主题，多配置，快速集成，开箱即用 * 最新技术栈，使用`Vue3`、`Typescript`、`Pinia`、`Vite`等前端前沿技术 * 强大的鉴权系统，对路由、菜单、功能点等支持三种鉴权模式，满足不同的业务鉴权需求 * 持续更新，实用性页面模板功能和交互，随意搭配组合，让构建页面变得简单化预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1831e0ff4f0740319ea2d8be7ce3357c~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=40687\&e=png\&b=c8c8c8) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac0716d320a445e6a13992ba8d4032bf~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=35852\&e=png\&b=19191d) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/43559f4f12d646b38fe46a5013480521~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=22672\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82ea076e06574e4ea2f59d6a316a2ffc~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=22048\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5e17828020148dca856b6d2768b522a~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=30029\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/066cfb47815642d892e356e2d2ad3acf~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=29560\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d63b8280adf94099b04bd1e730e29564~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=28219\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6239faaab83498f9f4026c9d0338a6e~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=24832\&e=png) ## vue3-antd-admin (3.9k) vue3-antd-admin（github上的标星数为~~2.8k~~ 3.9k）基于vue-cli5.x/vite2.x + vue3.x + ant-design-vue3.x + typescript hooks 的基础后台管理系统模板。集成RBAC的权限系统，JSON Schema动态表单，动态表格，漂亮锁屏界面等。 * 文档地址：[vue3-antd-admin Documentation](https://github.com/buqiyuan/vue3-antd-admin) * 仓库地址：[vue-cli版](https://github.com/buqiyuan/vue3-antd-admin)、[vite版](https://github.com/buqiyuan/vite-vue3-admin) * 预览地址：[Gitee](http://buqiyuan.gitee.io/vue3-antd-admin/)、[Vercel](https://vue3-antd-admin.vercel.app/) 预览效果: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1e97b0651ed41e0a0d34cc9d58a743d~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=23519\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e1700e7485164a929b7a605228c98fd4~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=43397\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63052168ec9149bea147a4695e735acc~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=70437\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0666a69f3f2f4f2b83d70e849d67a35b~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=26902\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84dbdb24567d4b93ac905dbbd55cede8~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=27134\&e=png) ## vue3-composition-admin (3.2k) > 项目的基础版本出自于源于 [花裤衩](https://juejin.cn/user/518625216445533) 大佬的 [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)。 [vue3-composition-admin](https://github.com/RainManGO/vue3-composition-admin)（github上的标星数为1.9k）是一个后台前端解决方案，它基于 [vue](https://github.com/vuejs/vue), [typescript](https://www.typescriptlang.org/) 和 [element-ui](https://github.com/ElemeFE/element) 实现，项目都是以composition api风格编写。本项目使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级后台产品原型。 * 文档地址：[vue3-composition-admin Documentation](https://rainmango.github.io/vue3-composition-admin-docs/zh/) * 仓库地址： * 预览地址：预览效果" ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1521dedf1d07409690ee5bd05a47e128~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=40772\&e=png\&b=fefefe) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb4ba784fbce467994ef396132105cdd~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=27380\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fdd495169d74f6ea02d85182c1c2311~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=25468\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc34d02bc1ca4a858d43430aaf40bf5e~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=21856\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ae7c9bd032141ad8809bf1dbe736257~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=38774\&e=png) ## fantastic-admin (2.8k) `Fantastic-admin`（github上的标星数为~~1.6k~~ 2.8k）是一款开箱即用的 Vue 中后台管理系统框架。有 [vue2](https://hooray.gitee.io/fantastic-admin/guide-vue2/start.html)（现已停止维护）和 [vue3](https://hooray.gitee.io/fantastic-admin/) 的版本。 * 技术栈：[Vite](https://cn.vitejs.dev/) + [Vue 3](https://v3.cn.vuejs.org/) ([v3 迁移指南](https://v3.cn.vuejs.org/guide/migration/introduction.html)) + [Vue Router 4](https://next.router.vuejs.org/zh/) + [Pinia](https://pinia.vuejs.org/) + [Element Plus](https://element-plus.org/#/zh-CN) * 文档地址：[Fantastic-admin Documentation](https://hooray.gitee.io/fantastic-admin/) * 仓库地址：[Github](https://github.com/hooray/fantastic-admin)、[Gitee](https://gitee.com/hooray/fantastic-admin) * 预览地址：[基础版](https://hooray.gitee.io/fantastic-admin/vue3/basic)、[专业版](https://hooray.gitee.io/fantastic-admin/vue3/pro) 特点: * 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端 * 提供系统配置文件，轻松实现个性化定制 * 精心设计的动效，让每一处的动画都干净利落 * 根据路由配置自动生成导航栏 * 基于文件系统的路由 * 支持全方位权限验证 * 内置多级路由最佳缓存方案 * 轻松实现国际化多语言适配 * 提供接近于浏览器原生标签栏操作体验的标签页功能基础版预览效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88cbe1da0977467f808a67ae93691c6f~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=56997\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a8ebb7795954db8b43c92c2851729ad~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=108044\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/89298b9618aa46eb8d272e24eba0754b~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=101463\&e=png\&b=7e7d7d) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd08600a4a674eaba5be210acd9cad14~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=29333\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02e4de857ab141b583850a8b7eed6753~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=86962\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a15e5240481a4100a8e6ca50c8d7b5fb~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=109134\&e=png) 专业版预览效果： ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c7b65763abc44319e95b730583c2f8a~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=56416\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2796530fe80e4637855a54fe2d889114~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=110710\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0464025c7f7434b9cc1a7cc1fe09294~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=103049\&e=png\&b=7d7c7c) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5212acf9de75409c81bc36be45456762~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=80854\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85a7f33d0f1c44dd8431bfb9ffa899a0~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=36250\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1875131415d4fbd9d4e63b836ba48d7~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=39112\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/62c6457108ab44b28f62252421ede704~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=969\&s=81168\&e=png) 专业版与基础版区别: | ⭐功能与服务⭐ | 基础版 | 专业版 | | :----------- | :-------------- | :-------------- | | 长期维护更新，提供新特性 | ✔️ | ✔️ | | 定期修复 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 (2.1k) > Gitee 上面的 stars 为 ~~6.6k~~ 8.2k。基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。 * 仓库地址：[Github](https://github.com/lyt-Top/vue-next-admin)、[Gitee](https://gitee.com/lyt-top/vue-next-admin) * 预览地址：[vue-next-admin](https://lyt-top.gitee.io/vue-next-admin-preview/#/login) 效果预览: ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd60e7732e0c4bc9add159332c5eb173~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=50633\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c13987dac90c416292e84bdf60675c58~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=29877\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d75430f8c5f949fb90c1c7750167d73e~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=50038\&e=png\&b=0f0f0f) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ffbc693a121d4f258eb56147ddabc0e6~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=148258\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/60989bb128fb40ccb43245d86e4b0e4f~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=46744\&e=png) ## vue-admin-box (1.8k) [vue-admin-box](https://github.com/cmdparkour/vue-admin-box)（github上的标星数为~~1.6k~~ 1.8k）是一个免费并且开源的中后台管理系统模板。使用最新版本的 vue3 + vite + element-plus 开发而成，目的是为了解决通用型的业务中后台系统复杂的配置。 * Github仓库地址： * Gitee仓库地址： * 在线预览地址： * 国内用户可访问该地址：特点: * 适合中后台开发的路由配置、状态管理机制（状态默认支持本地存储）、已封装完善的axios及api管理机制 * 极方便扩展的主题配置功能，默认支持三种典型的中后台风格 * 简易配置的页面缓存功能，只需配置noCache属性，无需配置其他的任何属性，如组件名称，路由名称等等很多框架需要配置的东西 * 典型增删改查的三种业务表格，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格” * 无路由跳转的刷新功能，支持缓存页面刷新，目前了解的多数框架都不支持缓存页面的刷新 * 方便扩展的国际化解决方案，并提供了两套非国际化的基础模板和两套国际化的基础模板（ts版本/js版本） * 手写版本的各类自定义指令 * 已经过多个中后台业务检验过的表格公用组件及弹窗公用组件，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格” 预览效果" ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f29675c436964e98ba3faa7bd1dba315~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=86216\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fd66afd82ea4fbfbdd7537e98cac65f~tplv-k3u1fbpfcp-zoom-1.image#?w=1911\&h=943\&s=41447\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f7f97168bad499aaf2ab17d6dd47a54~tplv-k3u1fbpfcp-zoom-1.image#?w=1911\&h=943\&s=39975\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e90642d996d948648130e7768f608513~tplv-k3u1fbpfcp-zoom-1.image#?w=1903\&h=943\&s=42957\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eef1c8ee48024eeebca5f4a469edb284~tplv-k3u1fbpfcp-zoom-1.image#?w=1907\&h=941\&s=47460\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/edba025baa6c41a488e7705bccb185b2~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=134715\&e=png) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a2447417ca64c95833246cedf6cd03c~tplv-k3u1fbpfcp-zoom-1.image#?w=1920\&h=914\&s=214250\&e=png\&b=f9f2e9)