阿超 > vue-admin-better

vue-admin-better

2025-11-17

前端

往事依稀浑似梦，都随风雨到心头。——巴金《家》

https://github.com/zxwk1998/vue-admin-better

Vue Admin Better：拒绝过度封装、极速构建体验的中后台前端框架深度解析

一个追求“更纯粹、更高效、更好上手”的 Vue 中后台解决方案。
项目地址：GitHub 仓库 ｜ 演示地址合集见下文

1. 为什么值得关注 Vue Admin Better？

Vue 中后台生态已经很成熟，但很多脚手架/模板存在这些痛点：启动慢、打包时间长、封装过度不易定制、权限系统耦合复杂。
Vue Admin Better 的定位非常鲜明：

  • 拒绝过度封装，减少“找不到源码逻辑”的挫败感
  • 极致构建体验：2025 全新版本宣称运行速度提升 10–15 倍，打包速度提升 20–30 倍
  • 构建时间控制在 5 秒以内（飞一般体验）
  • 支持 Vue2 + Element UI、Vue3 + Element Plus、Vue3 + Arco Design 多版本形态
  • 跨平台（PC / 平板 / 手机）适配
  • 已在 10 万+ 项目中实际应用（README 声明）

2. 核心特性一览

README 中列出的主力能力：

分类 能力点 说明
页面资源 40+ 高质量单页 开箱可参考和复用
权限体系 RBAC + JWT 支持前端/后端双模式路由控制 (intelligence / all)
性能与工程 构建加速 提升 10–15x 运行速度，20–30x 打包速度
路由管理 后端路由动态渲染 适配权限场景差异化显示
类型支持 良好类型定义 利于维护和扩展
多端适配 PC / 平板 / 手机 响应式布局
构建增强 自动生成 7Z 压缩包 支持分发与归档
Mock 支持 自动生成与导出功能 提升前后端并行效率
样式与风格 多主题、多布局切换 支持快速试错
安全增强 登录 RSA 加密 提升账号安全性
错误监控 errorlog 截获 提前发现异常
网络封装 Axios 精细封装 多数据源 + 多成功状态码 + 多传参形式
代码规范 SCSS 自动排序 / ESLint 自动修复 提升一致性和质量
构建体验 超短启动 & 构建时间 研发效率加速

3. 演示体系

免费版（开源可商用）：

付费版（Pro / Plus / Shop 线）：

4. 仓库与生态指标

5. 快速开始（根据 README）

5.1 克隆并启动（Vue2 版本：当前仓库）

1
2
3
4
5
6
7
8
# 克隆项目（master 分支）
git clone -b master https://github.com/zxwk1998/vue-admin-better.git

# 安装依赖（使用国内源提升速度，可改为默认）
pnpm i --registry=http://mirrors.cloud.tencent.com/npm/

# 本地开发启动（rspack 构建）
npm run serve:rspack

5.2 Vue3 + Element Plus 版本

1
2
3
git clone https://github.com/zxwk1998/vue3-admin-better.git
pnpm i --registry=http://mirrors.cloud.tencent.com/npm/
npm run dev

5.3 Vue3 + Arco Design 版本

1
2
3
git clone https://github.com/zxwk1998/vue-admin-arco.git
pnpm i --registry=http://mirrors.cloud.tencent.com/npm/
npm run dev

6. 权限系统实践示例（示例代码非 README 原封，基于其“前端控制 / 后端控制”理念构建）

README 提到支持前端控制模式 intelligence 和后端控制模式 all。这里给出一个典型实现思路示例，帮助理解架构（可根据自身后端 API 结构调整）。

6.1 前端静态 + 角色校验模式（intelligence）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// src/permission/routes-intelligence.ts
import { RouteRecordRaw } from 'vue-router'
import { hasRole } from '@/utils/auth'

export const staticRoutes: RouteRecordRaw[] = [
  { path: '/login', component: () => import('@/views/login/index.vue'), meta: { public: true } },
  { path: '/', component: () => import('@/layout/BaseLayout.vue'), meta: { roles: ['admin','editor'] },
    children: [
      { path: 'dashboard', component: () => import('@/views/dashboard/index.vue'), meta: { title: '仪表盘', icon: 'dashboard', roles: ['admin','editor'] } },
      { path: 'user', component: () => import('@/views/user/index.vue'), meta: { title: '用户管理', roles: ['admin'] } }
    ]
  }
]

// 过滤函数
export function filterRoutesByRole(routes: RouteRecordRaw[], currentRoles: string[]) {
  return routes.reduce<RouteRecordRaw[]>((acc, r) => {
    if (r.meta?.public || (r.meta?.roles && hasRole(currentRoles, r.meta.roles))) {
      const clone = { ...r }
      if (clone.children) {
        clone.children = filterRoutesByRole(clone.children, currentRoles)
      }
      acc.push(clone)
    }
    return acc
  }, [])
}

6.2 后端返回动态路由模式（all）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// src/permission/dynamic-loader.ts
import type { RouteRecordRaw } from 'vue-router'
import { router } from '@/router'
import { fetchUserRoutes } from '@/api/system'

export async function mountBackendRoutes() {
  const resp = await fetchUserRoutes()
  // 后端返回示例结构：
  // [{ path:'/product', component:'product/index', meta:{ title:'商品管理', roles:['admin'] }, children:[...] }]
  const asyncRoutes: RouteRecordRaw[] = resp.data.map(transformBackendRoute)
  asyncRoutes.forEach(r => router.addRoute(r))
}

function transformBackendRoute(r: any): RouteRecordRaw {
  return {
    path: r.path,
    component: () => import(`@/views/${r.component}.vue`),
    meta: r.meta,
    children: r.children?.map(transformBackendRoute)
  }
}

6.3 入口逻辑整合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { router } from '@/router'
import { getMode, getCurrentRoles } from '@/utils/app'
import { filterRoutesByRole } from '@/permission/routes-intelligence'
import { staticRoutes } from '@/permission/routes-intelligence'
import { mountBackendRoutes } from '@/permission/dynamic-loader'

const app = createApp(App)

async function bootstrap() {
  const mode = getMode() // intelligence | all
  if (mode === 'intelligence') {
    const roles = await getCurrentRoles()
    const allowed = filterRoutesByRole(staticRoutes, roles)
    allowed.forEach(r => router.addRoute(r))
  } else {
    await mountBackendRoutes()
  }
  app.use(router).mount('#app')
}
bootstrap()

7. Axios 精细封装示例（结合 README 提到多数据源、多成功状态码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// src/utils/request.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'

interface BizResponse<T=any> {
  code: number
  data: T
  message: string
}

const SUCCESS_CODES = [0, 200, 10000]
const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE,
  timeout: 12000
})

// 多数据源切换
service.interceptors.request.use(cfg => {
  // 例如根据业务标识选择不同后端
  if (cfg.headers?.['X-DS']) {
    cfg.baseURL = getDynamicBase(cfg.headers['X-DS'])
  }
  // JWT 注入
  const token = localStorage.getItem('TOKEN')
  if (token) {
    cfg.headers.Authorization = `Bearer ${token}`
  }
  return cfg
})

// 统一响应处理
service.interceptors.response.use(
  (resp: AxiosResponse<BizResponse>) => {
    if (SUCCESS_CODES.includes(resp.data.code)) {
      return resp.data.data
    }
    return Promise.reject(new Error(resp.data.message || '业务异常'))
  },
  (error) => {
    // errorlog 捕获可加上
    console.error('[HTTP ERROR]', error)
    return Promise.reject(error)
  }
)

export function request<T=any>(config: AxiosRequestConfig): Promise<T> {
  return service(config)
}

function getDynamicBase(ds: string): string {
  switch (ds) {
    case 'admin': return import.meta.env.VITE_API_ADMIN
    case 'shop': return import.meta.env.VITE_API_SHOP
    default: return import.meta.env.VITE_API_BASE
  }
}

8. 多主题 / 布局切换示例（与“多样化支持”契合）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// src/theme/index.ts
export type Theme = 'light' | 'dark' | 'classic'

const THEME_KEY = 'APP_THEME'

export function getTheme(): Theme {
  return (localStorage.getItem(THEME_KEY) as Theme) || 'light'
}

export function setTheme(theme: Theme) {
  localStorage.setItem(THEME_KEY, theme)
  document.documentElement.setAttribute('data-theme', theme)
}

// 布局切换
export type Layout = 'side' | 'mix' | 'top'
const LAYOUT_KEY = 'APP_LAYOUT'

export function getLayout(): Layout {
  return (localStorage.getItem(LAYOUT_KEY) as Layout) || 'side'
}

export function setLayout(layout: Layout) {
  localStorage.setItem(LAYOUT_KEY, layout)
  document.body.setAttribute('data-layout', layout)
}

在样式层可使用：

1
2
3
4
5
6
7
8
9
10
// src/styles/theme.scss
[data-theme='dark'] {
  --bg-color: #141414;
  --text-color: #ddd;
}

[data-theme='light'] {
  --bg-color: #ffffff;
  --text-color: #333;
}

9. RSA 登录加密示例（映射“登录 RSA 加密”特性）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// src/utils/rsa.ts
import JSEncrypt from 'jsencrypt'

const PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
...你的后端提供的公钥...
-----END PUBLIC KEY-----`

export function encryptPassword(raw: string): string {
  const enc = new JSEncrypt()
  enc.setPublicKey(PUBLIC_KEY)
  return enc.encrypt(raw) || ''
}

// 使用
// const payload = { username, password: encryptPassword(password) }

10. 工程细节优化建议（符合 README 强调的“开发友好”）

优化点 说明
使用 pnpm 节约磁盘 + 更快的安装
配置 ESLint + 自动修复 与 README 中“严格校验规则”一致
SCSS 自动排序 保持样式结构统一
Rspack / Vite 构建提速 根据所选版本分支选择构建工具
分环境打包生成 7z 归档部署产物
提供 mock 自动导出 保证前后端解耦并行开发

11. 适合人群（摘自 README）

  • 已/计划使用 Element UI / Element Plus 的开发者
  • 有 1 年+ 前端开发经验，做过实际项目
  • 想深入权限、工程化、优化机制的同学

12. 商用与协议

开源版 MIT，可免费商用 —— 保留许可声明即可（根据 README 提示）。如果对你有帮助请顺手点个 Star，让生态更长久发展。

13. 生态 & 友链（部分 README 列出）

  • OPSLI 最佳实践
  • uView 移动端 UI 框架
  • form-generator 表单代码生成器
  • wangEditor 富文本编辑器

这些可以作为你二次集成时的生态补充。

14. 小结与使用策略建议

目标 推荐策略
快速起步 选择 Vue2 主仓库，体验完整基础功能
新项目构建 Vue3 + Element Plus 分支，更长生命周期
定制主题 & 商城 Shop / Plus / Pro 的增值版本参考演示
大型系统权限 后端路由模式（all）+ RBAC + JWT + 动态路由渲染
性能与构建 优先启用 rspack / vite，新版脚手架特性
多团队协作 严格 ESLint + 代码分层（views/components/hooks）

15. 结束语

Vue Admin Better 不是“功能大杂烩式”的复杂封装模板，而是一个强调速度、开放性、可维护性、权限灵活与多端适配的高效中后台脚手架。
如果你正寻找一个既能快速落地、又不失可扩展空间的 Vue Admin 起点，它值得深入体验。

赶紧去看看演示，Star 一下支持作者持续迭代吧：
GitHub 仓库：Vue Admin Better

你的每一个 Star，都是对开源生态的真实推动 🚀