从0-1实战演练后台管理系统 （1）技术选型-2024年最流行的后台管理模板，你用过几款？

近期，笔者需要在短期内搭建一套快速可定制的后台管理系统。

本次选型，重点从以下几个方面：

• 开源，免费，简单易上手
• 技术栈为 Vue 、 Typescript ，无后端依赖
• 有提供开发文档或教程
• 持续更新维护，最近一次提交距今不超过 1 个月
• Github stars 数高于 1000

经过调研，发现网上后台管理系统种类繁多，为了帮助有类似需求的开发者选择合适的后台管理系统，特此记录下选型过程。

入选系统

后台管理系统	星标	最近提交时间
vue-pure-admin	16.1K	近1周
Geeker-Admin	7.2K	近1月
v3-admin-vite	5.1K	近1月
soybean-admin	9.9K	近2天
naive-ui-admin	4.9K	近1天
vue-vben-admin	24.8K	近1天
vue3-element-admin	1.4K	近5天
Fantastic-admin 基础版	2.4K	近1周

UI 库

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

后台管理系统	UI 库
vue-pure-admin	Element Plus
Geeker-Admin	Element Plus
v3-admin-vite	Element Plus
soybean-admin	Naive UI / Ant Design Vue
naive-ui-admin	Naive UI
vue-vben-admin	Ant Design Vue
vue3-element-admin	Element Plus
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 基础版	✅

布局

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

由于各家对于布局的名称叫法不一，大致整理了以下几种：

1. 单侧边栏布局

2. 双侧边栏布局

3. 双栏布局

4. 顶栏浮动布局

5. 侧边栏浮动布局

6. 顶栏浮动面板布局

7. 侧边栏浮动面板布局

后台管理系统	布局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 基础版	✅	✅	✅		✅

主题

后台管理系统	主题设置	明暗模式切换	灰色模式	色弱模式
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 基础版	✅	✅	✅			✅		✅		✅

标签栏

功能说明

• 显示图标：在标签页上显示图标
• 快捷操作：支持批量关闭标签页，或者其他更多操作内容
• 拖拽排序：支持标签页拖拽排序
• 常驻：标签页常驻在标签栏上，无法关闭
• 最大化：将业务页面全屏或最大化展示
• 合并：标签页支持按需合并
• 快捷键：支持通过快捷键切换标签页

后台管理系统	显示图标	快捷操作	拖拽排序	常驻	最大化	合并	快捷键	持久化
vue-pure-admin		✅		✅	✅			✅
Geeker-Admin	✅	✅		✅	✅			✅
v3-admin-vite		✅			✅			✅
soybean-admin	✅	✅		✅	✅			✅
naive-ui-admin		✅	✅	✅				✅
vue-vben-admin		✅	✅	✅	✅			✅
vue3-element-admin		✅
Fantastic-admin 基础版	✅	✅	✅				✅

搜索

后台管理系统	导航搜索	页签搜索	支持拼音搜索	快捷键
vue-pure-admin	✅		✅	✅
Geeker-Admin	✅			✅
v3-admin-vite	✅			✅
soybean-admin	✅			✅
naive-ui-admin
vue-vben-admin	✅			✅
vue3-element-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 基础版

权限

颗粒度更细的权限控制。

后台管理系统	鉴权函数	鉴权指令	鉴权组件
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 作为后台管理系统模版。