这可能是全网最详细的「管理后台」选择指南

2024-11-06 08:30   重庆  

点击关注公众号,“技术干货” 及时达!

引子

相信大家或多或少都在掘金、知乎、CSDN或者微信公众号上刷到过这样的文章:

  • 《5.9k star!一款清新优雅的后台管理系统,好用!》
  • 《【建议收藏】10款适合外包的开源后台管理系统》
  • 《强烈推荐!!这是我见过最强的后台管理系统!!》
  • ……

这类文章的标题都很吸引人,但实际文章内容却没什么价值。

文章内容通常是先介绍一下技术栈,然后就是大量的截图,通常截图还是截一些第三方插件的页面截图,然后宣称集成了图表、播放器、工作流、地图等功能,丝毫不介绍系统本身提供的功能。

每次看到这类文章,我第一反应就是,这些第三方插件开发者难道不会自己安装么?哪怕系统里已经安装好了,也提供了几个简单的示例,但开发者在使用的时候不还是需要查阅对应插件的文档才会使用,系统又集成了什么?所以这个系统比其他系统好用在哪?又最强在哪?这样的文章对开发者做技术选型几乎毫无帮助。

带着这样情绪,我决定整理一篇文章,真正帮助开发者选择合适的后台管理系统。

入选系统

首先要感谢此网站,它其实和我在做的差不多是同一件事,只不过它统计的信息并不准确,且无法进行横向对比,而且有部分系统已长期不更新,所以使用价值不高。

其次考虑到网上后台管理系统种类繁多,我也无法对所有后台管理系统进行详细的横向对比,因此能入选的系统,会有几条硬性规则:

  • 技术栈为 Vue 3 + Vite 5 ,纯前端,无后端依赖
  • Github stars 数高于 1000
  • 有提供开发文档或教程
  • 持续更新维护,最近一次提交距今不超过 1 个月

除此之外,以下的对比项,仅检查系统是否支持,不对使用方式、使用范围等进行评判,因为不同系统有不同的设计理念。举例来说,水印功能有的系统是支持全局设置,而有的系统则是页面级别的设置,我会一律视为支持该功能。

后台管理系统星标最近提交时间
vue-pure-admin
Geeker-Admin
v3-admin-vite
soybean-admin
naive-ui-admin
vue-vben-admin
vue3-element-admin
Fantastic-admin 基础版
Fantastic-admin 专业版

「利益相关申明:本人为 Fantastic-admin 作者」

UI 库

UI 库在很大程度上决定了开发者的技术选型,因此在选择后台管理系统时,应该首先了解该系统是否支持你期望的 UI 库。

后台管理系统UI 库
vue-pure-adminElement Plus
Geeker-AdminElement Plus
v3-admin-viteElement Plus
soybean-adminNaive UI / Ant Design Vue
naive-ui-adminNaive UI
vue-vben-adminAnt Design Vue
vue3-element-adminElement Plus
Fantastic-admin 基础版Element Plus / 支持更换任意 UI 库
Fantastic-admin 专业版Element Plus / 支持更换任意 UI 库

纯净版

纯净版即没有任何用于演示的代码和插件依赖,方便让开发者快速进入开发阶段。如果未提供纯净版,则需要开发者手动删除无关文件后,才能开始进行开发工作。

后台管理系统是否提供纯净版
vue-pure-admin
Geeker-Admin
v3-admin-vite
soybean-admin
naive-ui-admin
vue-vben-admin
vue3-element-admin
Fantastic-admin 基础版
Fantastic-admin 专业版

布局

布局在这里指代导航菜单的展现形式,它直接决定了后台管理系统的整体外观和操作习惯,因此在选择后台管理系统时,应该了解该系统是否满足业务所需要的布局。

由于各家对于布局的名称叫法不一,大致整理了以下几种(点击名称可展开预览):

1. 单侧边栏布局
image.png
2. 双侧边栏布局
layout2.png
3. 双栏布局
layout3.png
4. 顶栏浮动布局
layout4.png
5. 侧边栏浮动布局
layout5.png
6. 顶栏浮动面板布局
layout6.png
7. 侧边栏浮动面板布局
layout7.png
后台管理系统布局1布局2布局3布局4布局5布局6布局7
vue-pure-admin


Geeker-Admin


v3-admin-vite



soybean-admin

naive-ui-admin



vue-vben-admin


vue3-element-admin


Fantastic-admin 基础版


Fantastic-admin 专业版

主题

后台管理系统主题设置明暗模式切换灰色模式色弱模式
vue-pure-admin
Geeker-Admin
v3-admin-vite
soybean-admin
naive-ui-admin

vue-vben-admin
vue3-element-admin

Fantastic-admin 基础版
Fantastic-admin 专业版

导航栏

功能说明

  • 鉴权:因为是导航栏鉴权,所以只要满足页面级鉴权即可
  • 缓存:使用 keep-alive 缓存页面
  • 图标:导航项目图标
  • 激活图标:当导航选中激活时的图标
  • 徽章:导航项目右侧的角标
  • 外链:支持在新窗口打开外部链接
  • 内嵌:使用 iframe 打开目标页面
  • 默认展开:默认展开折叠的导航栏
  • 始终展开:始终展开折叠的导航栏
  • 新窗口打开:支持按住Command/Ctrl键点击导航栏项目在新窗口打开
  • 收藏夹:方便快速访问已收藏的导航菜单
后台管理系统鉴权缓存图标激活图标徽章外链内嵌默认展开始终展开新窗口打开收藏夹
vue-pure-admin


Geeker-Admin






v3-admin-vite





soybean-admin





naive-ui-admin





vue-vben-admin





vue3-element-admin






Fantastic-admin 基础版




Fantastic-admin 专业版

标签栏

功能说明

  • 显示图标:在标签页上显示图标
  • 快捷操作:支持批量关闭标签页,或者其他更多操作内容
  • 拖拽排序:支持标签页拖拽排序
  • 常驻:标签页常驻在标签栏上,无法关闭
  • 最大化:将业务页面全屏或最大化展示
  • 合并:标签页支持按需合并
  • 快捷键:支持通过快捷键切换标签页
后台管理系统显示图标快捷操作拖拽排序常驻最大化合并快捷键持久化
vue-pure-admin



Geeker-Admin


v3-admin-vite




soybean-admin


naive-ui-admin



vue-vben-admin


vue3-element-admin






Fantastic-admin 基础版



Fantastic-admin 专业版

搜索

后台管理系统导航搜索页签搜索支持拼音搜索快捷键
vue-pure-admin
Geeker-Admin

v3-admin-vite

soybean-admin

naive-ui-admin



vue-vben-admin

vue3-element-admin



Fantastic-admin 基础版

Fantastic-admin 专业版

国际化

后台管理系统国际化RTL模式
vue-pure-admin
Geeker-Admin
v3-admin-vite

soybean-admin
naive-ui-admin

vue-vben-admin
vue3-element-admin
Fantastic-admin 基础版

Fantastic-admin 专业版

权限

颗粒度更细的权限控制。

后台管理系统鉴权函数鉴权指令鉴权组件
vue-pure-admin
Geeker-Admin
v3-admin-vite
soybean-admin

naive-ui-admin
vue-vben-admin
vue3-element-admin
Fantastic-admin 基础版
Fantastic-admin 专业版

杂项

后台管理系统面包屑导航页面重载全屏锁屏水印页脚
vue-pure-admin
Geeker-Admin

v3-admin-vite
soybean-admin

naive-ui-admin

vue-vben-admin
vue3-element-admin

Fantastic-admin 基础版

Fantastic-admin 专业版

最后

推荐类的文章都是具备时效性的,我估计这篇文章的时效性可能也就半年。也就是说,如果你看到这篇文章的时候已经是 2025 年,这篇文章可能就不推荐阅读了。

但是!我创建了一个选择指南的 Github 仓库,仓库地址是:https://github.com/hooray/pick-the-right-admin

我计划会每3-6个月全面更新一次,核查一下现有入选的系统是否还在更新维护,以及功能项是否有变化;同时也会重新筛选下市面上是否有新的管理后台系统符合入选的要求。当然如果你有更好的推荐,也欢迎给仓库提 issue

点击关注公众号,“技术干货” 及时达!

稀土掘金技术社区
掘金,一个帮助开发者成长的技术社区
 最新文章