草庐IT

开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！

一只大傻雕 2023-03-28 原文
原文链接：​​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鉴权，权限管理，动态路由，显隐可控组件，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器等开发必备功能。

相关地址

技术选型

  • 前端：用基于​​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、动态菜单、权限校验、按钮级别权限控制等功能。项目使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。

相关地址

特点

  • 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题：可配置的主题
  • 国际化：内置完善的国际化方案
  • Mock 数据 内置 Mock 数据方案
  • 权限 内置完善的动态路由权限生成方案
  • 组件 二次封装了多个常用的组件

预览效果

vue-admin-better (12.8k)

原 vue-admin-beauteful 。

​​vue-admin-better​​（github上的标星数为7.2k

相关地址

特性：

  • ? 40+高质量单页
  • ? RBAC 模型 + JWT 权限控制
  • ? 10 万+ 项目实际应用
  • ? 良好的类型定义
  • ? 开源版本支持免费商用
  • ? 跨平台 PC、手机端、平板
  • ?️ 后端路由动态渲染
预览效果：

vue-pure-admin (3.4k)

​​vue-pure-admin​​​（github上的标星数为3.4k）是一个免费开源的中后台模版。使用了最新的 ​​Vue 3​​​、​​Vite2​​​、​​Element Plus​​​ 、​​TypeScript​​、等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

相关地址

​​精简版​​​ 是基于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​​ 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目。

相关地址

特性

  • 二次封装实用高扩展性组件
  • 响应式、多主题，多配置，快速集成，开箱即用
  • 最新技术栈，使用​​Vue3​​​、​​Typescript​​​、​​Pinia​​​、​​Vite​​等前端前沿技术
  • 强大的鉴权系统，对路由、菜单、功能点等支持三种鉴权模式，满足不同的业务鉴权需求
  • 持续更新，实用性页面模板功能和交互，随意搭配组合，让构建页面变得简单化

预览效果

Geeker-Admin (2.1k)

​​Geeker-Admin​​​（github上的标星数为2.1k）基于 ​​Vue3.2​​​、​​Vite2​​​、​​TypeScript​​​、​​Pinia​​​、​​Element Plus​​ 开源的一套后台管理模板。

相关地址

预览效果

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-composition-admin (1.9k)

项目的基础版本出自于源于 ​​花裤衩​​​ 大佬的 ​​vue-element-admin​​。

​​vue3-composition-admin​​​（github上的标星数为1.9k）是一个后台前端解决方案，它基于 ​​vue​​​, ​​typescript​​​ 和 ​​element-ui​​ 实现，项目都是以composition api风格编写。

本项目使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级后台产品原型。

相关地址

功能

- 用户管理
- 登录（视频背景）
- 注销

- 权限验证
- 页面权限
- 指令权限
- 权限配置
- 二步登录

- 全局功能
- 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 实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。

相关地址

特点

  • 最新技术栈：使用 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 开发而成，目的是为了解决通用型的业务中后台系统复杂的配置。

相关地址

特点

  • 适合中后台开发的路由配置、状态管理机制（状态默认支持本地存储）、已封装完善的axios及api管理机制
  • 极方便扩展的主题配置功能，默认支持三种典型的中后台风格
  • 简易配置的页面缓存功能，只需配置noCache属性，无需配置其他的任何属性，如组件名称，路由名称等等很多框架需要配置的东西
  • 典型增删改查的三种业务表格，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”
  • 无路由跳转的刷新功能，支持缓存页面刷新，目前了解的多数框架都不支持缓存页面的刷新
  • 方便扩展的国际化解决方案，并提供了两套非国际化的基础模板和两套国际化的基础模板（ts版本/js版本）
  • 手写版本的各类自定义指令
  • 已经过多个中后台业务检验过的表格公用组件及弹窗公用组件，详情请查看“页面栏目”内的“业务表格”、“分类联动表格”、“树联动表格”

预览效果

fantastic-admin (795)

​​Fantastic-admin​​​是一款开箱即用的 Vue 中后台管理系统框架。有 ​​vue2​​​（现已停止维护）和 ​​vue3​​ 的版本。

相关地址

特点

  • 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容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 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

相关地址

效果预览

开箱绝对x-oss-processpxprocesstypescriptvue3管理后台模板Html/CSS前端开发yyds干货盘点

有关开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. ruby - 如何在 ruby​​ 中运行后台线程？ - 2

    我是ruby​​的新手，我认为重新构建一个我用C#编写的简单聊天程序是个好主意。我正在使用Ruby2.0.0MRI(Matz的Ruby实现)。问题是我想在服务器运行时为简单的服务器命令提供I/O。这是从示例中获取的服务器。我添加了使用gets()获取输入的命令方法。我希望此方法在后台作为线程运行，但该线程正在阻塞另一个线程。require'socket'#Getsocketsfromstdlibserver=TCPServer.open(2000)#Sockettolistenonport2000defcommandsx=1whilex==1exitProgram=gets.chomp

  3. ruby - 为什么这些方法没有解决？ - 2

    这个问题在这里已经有了答案:WhydoRubysettersneed"self."qualificationwithintheclass?(3个答案)关闭29天前。给定这段代码:classSomethingattr_accessor:my_variabledefinitialize@my_variable=0enddeffoomy_variable=my_variable+3endends=Something.news.foo我收到这个错误:test.rb:9:in`foo':undefinedmethod`+'fornil:NilClass(NoMethodError)fromtes

  4. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  5. python - 这些脚本语言中哪种更适合渗透测试？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭9年前。Improvethisquestion首先，我想避免一场关于语言的口水战。可供选择的语言有Perl、Python和Ruby。我想提一下，我对所有这些都很满意，但问题是我不能只专注于一个。例如，如果我看到一个很棒的Perl模块，我必须尝试一下。如果我看到一个不错的Python应用程序，我必须知道它是如何制作的。如果我看到RubyDSL或一些Ruby巫术，我就会迷上Ruby一段时间。目前我是一名Java开发人员，但计划在不久的将来

  6. ruby-on-rails - 使用 Kernel#fork 进行后台进程，专业人士？缺点？ - 2

    我想知道使用fork{}从Rails应用程序“后台”处理是否是个好主意...从我收集到的fork{my_method;Process#setsid}实际上做了它应该做的事情。1)创建另一个具有不同PID的进程2)不中断调用过程(例如它继续w/o等待fork完成)3)执行子进程直到它完成..这很酷，但这是个好主意吗？fork到底在做什么？它会在内存中创建我的整个railsmongrel/passenger实例的重复实例吗？如果是这样那就太糟糕了。或者，它是否以某种方式在不消耗大量内存的情况下完成。我的最终目标是取消我的后台守护进程/队列系统，转而支持这些进程的fork(主要是发送电子邮件

  7. vue 实现内容超出两行显示展开更多功能，可依据需求自定义任意行数！ - 2

    平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  8. ruby - 如何找到当前运行的 Ruby 脚本的绝对路径？ - 2

    我有一个Ruby脚本，它想要确定它的绝对路径，以便找到一些相对于脚本存储的数据文件。最简单/最好的方法是什么？ 最佳答案 这可以简单地使用:File.expand_path$0 关于ruby-如何找到当前运行的Ruby脚本的绝对路径？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/7802630/

  9. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：

  10. ruby - 如何在 Ruby 中构建可移植的绝对路径？ - 2

    让我们假设一个脚本需要访问一个目录，比如在“任意”操作系统上的/some/where/abc。在Ruby中构建路径有几个选项:File.join('','some','where','abc')File.absolute_path("some#{File::SEPARATOR}where#{File::SEPARATOR}abc",File::SEPARATOR)标准API中的路径名我相信第一个解决方案足够清晰，但符合惯用语。根据我的经验，一些代码审查会要求评论来解释它的作用......问题有没有更好的方法来构建绝对路径是Ruby，其中更好的意思是“完成工作并为自己说话”？

随机推荐