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 分支

技术架构

以下示意图展示整体架构流程：

技术优势

界面效果

使用示例（快速上手）

# 克隆项目
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，支持中英文等多语言切换。

项目对比

Fantastic‑admin 在自定义能力、终端适配、标签体验和 UI 自由度等方面整体更胜一筹。

总结

Fantastic‑admin/basic 是一个成熟、开箱即用、自由度高的 Vue3 后台框架，拥有丰富 UI 换装能力、标签页缓存机制、权限体系和国际化支持，非常适合对交付速度、结构清晰度和终端兼容要求高的项目。现有约 3k star，生态配套完善，是中小团队和个人开发者效率提升的好帮手。

项目地址

https://github.com/fantastic-admin/basic