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