关于前端:🎉🎉🎉-开箱即用这些-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 12.8k）主线版本基于 element-plus、element-ui、ant-design-vue 三者并行开发保护，同时反对电脑，手机，平板。

相干地址

• 🌐 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等前端前沿技术
• 弱小的鉴权零碎，对路由、菜单、性能点等反对三种鉴权模式，满足不同的业务鉴权需要
• 继续更新，实用性页面模板性能和交互，随便搭配组合，让构建页面变得简单化

预览成果

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…
• Gitee仓库地址：https://gitee.com/cmdparkour/…
• 在线预览地址：https://cmdparkour.github.io/…
• 国内用户可拜访该地址：https://cmdparkour.gitee.io/v…

特点

• 适宜中后盾开发的路由配置、状态管理机制（状态默认反对本地存储）、已封装欠缺的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、平板和挪动端
• 提供零碎配置文件，轻松实现个性化定制
• 精心设计的动效，让每一处的动画都干净利落
• 依据路由配置主动生成导航栏
• 基于文件系统的路由
• 反对全方位权限验证
• 内置多级路由最佳缓存计划
• 轻松实现国际化多语言适配
• 提供靠近于浏览器原生标签栏操作体验的标签页性能

预览成果

根底版：

专业版：

专业版与根底版区别

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

成果预览