Github 3k+ star，中后台管理系统框架，支持多款 UI 组件库，兼容PC、移动端！比商业系统还专业！！
嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！
Fantastic‑admin/basic 是一个基于 Vue3 + TypeScript 的中后台管理系统基础框架，开箱即用，兼容 PC、平板、移动端，原生支持 Element Plus、Arco Design、Naive‑UI 等多种 UI 组件库 。它提供了完整的项目结构、权限控制、国际化、多级缓存标签页等功能，适合快速搭建企业级后台应用。
痛点场景
-
企业需要快速启动后台项目，但配置繁琐、组件混乱、权限逻辑复杂；
-
UI 库切换、响应式布局、权限方案等需要手动实现，对开发者来说效率低；
-
快速示例与模板繁多，但没有清晰结构、难以集成实际业务；
-
想要支持多终端展示（PC / 手机）和国际化，却没有统一框架支撑。
Fantastic-admin/basic 正是为这些场景量身打造。
核心功能
-
UI 自由替换：默认 Element Plus，可替换为 Naive‑UI、Arco Design 等，灵活适配项目风格
-
多布局主题预设：支持多种导航、标题、标签栏风格，覆盖广泛后台场景
-
文件系统路由 & 自动导航生成：根据文件目录结构自动生成路由和导航菜单
-
权限验证体系：支持登录状态校验、角色权限控制、前后端权限分离逻辑
-
多级路由缓存机制：标签页方式模拟浏览器标签栏体验，自动维持缓存状态
-
国际化支持：默认内置 i18n 多语言切换能力
-
配置化定制：提供系统配置文件，可快速定制主题色、侧边栏风格、标签行为等
-
高度兼容设备：响应式适配 PC、平板、移动端三端布局
-
示例丰富（例：个人中心、表单页面、审批流程等）可参考 example 分支
技术架构
以下示意图展示整体架构流程：
技术优势
| 优势方向 | 描述 |
|---|---|
| 启动速度快 | Vue3 + TS + 模板目录结构，一拉即用 |
| 可定制性强 | UI 库、主题、布局、权限模块随意组合 |
| 模块清晰 | 路由、权限、状态、布局分层明确，方便接入业务 |
| 多终端适配 | PC/移动/平板都友好兼容，无需手写响应式 |
| 缓存标签页体验 | 多级路由缓存，切换体验与真正浏览器标签页一致 |
| 国际化支持 | 内置 i18n，方便对接多语言需求 |
界面效果
使用示例（快速上手）
# 克隆项目
git clone https://github.com/fantastic-admin/basic.git
cd basic
# 安装依赖
npm install
# 启动开发环境
npm run dev
目录结构简览：
src/├─ layouts/ # 多种布局模板├─ views/ # 页面视图（用户中心、表单、列表等示例）├─ router/ # 文件系统路由配置├─ store/ # 全局状态管理（使用 Pinia）├─ components/ # 公共组件（标签页、导航、权限控制等）├─ config/ # 系统配置（主题、权限、路由等）├─ locales/ # 国际化语言包
示例代码片段：
// config/permission.ts
export const routesWhiteList = ['/login', '/404']
export const loginRedirectPath = '/dashboard'// 在 router 中控制权限
router.beforeEach(async (to, from, next) => {const hasToken = getToken()if (hasToken) {const accessRoutes = await generateRoutes(roles)router.addRoutes(accessRoutes)next({...to, replace: true})} else if (routesWhiteList.includes(to.path)) {next()} else {next('/login')}
})
这一段展示了登录校验 + 动态权限路由生成的简洁实现思路。
应用场景
-
企业内部管理系统：HR 系统、销售后台、财务审批、用户中心等。
-
SaaS 平台后台：多租户、权限模块复杂，UI 可灵活切换。
-
创业项目 MVP 快速交付：前期界面需求明确但没有 UI 团队时最适合。
-
多终端控制台：需要适配 PC 和移动端的控制台项目。
-
多语言国际化平台：内置 i18n，支持中英文等多语言切换。
项目对比
| 对比项目 | UI 库支持 | 路由方式 | 缓存机制 | 国际化 | 多终端响应 | 自定义配置 |
|---|---|---|---|---|---|---|
| Fantastic‑admin/basic | 多（Element+, Naive‑UI, Arco） | 文件系统自动生成 | 标签页缓存体验出色 | 内置 i18n 支持 | PC/移动/平板兼容 | 配置化极强 |
| vue‑element‑admin | Element Plus 专属 | 手写配置路由 | 简单 keep-alive | 插件方式支持 | PC 为主 | 可，但结构杂 |
| CoreUI Vue 模板 | Bootstrap 风格 | 手动配置 | 无标签页机制 | 无内建支持 | 响应式但风格固定 | 限制多 |
| NocoBase（低代码 CRM） | UI 内封闭，插件系统 | 可视化路由生成 | 基础缓存机制 | 插件可支持 | PC 优先 | 插件扩展强 |
Fantastic‑admin 在自定义能力、终端适配、标签体验和 UI 自由度等方面整体更胜一筹。
总结
Fantastic‑admin/basic 是一个成熟、开箱即用、自由度高的 Vue3 后台框架，拥有丰富 UI 换装能力、标签页缓存机制、权限体系和国际化支持，非常适合对交付速度、结构清晰度和终端兼容要求高的项目。现有约 3k star，生态配套完善，是中小团队和个人开发者效率提升的好帮手。
项目地址
https://github.com/fantastic-admin/basic