从零打造 0 依赖前端架构与轻量级 RBAC 系统（附开源源码）

项目开源地址（拿来即用）

GitHub: https://github.com/Marshmallowc/hrms-frontend.git

说明：本项目完全开源，展示了在零 UI 框架依赖下，如何构建高性能、高可定制的企业级 RBAC 后台系统，适合作为 Vue 3 进阶学习参考。

---

引言：前端开发的“依赖困境”

在现今的前端生态中，开启一个新项目往往意味着一套固定的“起手式”：npm install 之后，紧接着就是 Element Plus、Ant Design Vue 或者 Tailwind CSS。在追求研发效率的同时，我们似乎逐渐习惯了做“配置工程师”，在组件库的文档海洋中寻找修改默认样式的 API，而不是编写自己的 CSS。

这种开发模式虽然高效，但副作用也显而易见：

1. 打包体积臃肿：引入一个庞大的 UI 库，哪怕按需加载，基础包体积依然可观。

2. 样式覆盖困难：为了修改一个按钮的圆角或颜色，往往需要使用 !important 或深度选择器，破坏了代码的可维护性。

3. 技术黑箱：过度依赖第三方封装，让开发者逐渐生疏了 Vue 3 核心的响应式原理和原生 CSS 布局能力。

为了打破这种“依赖惯性”，我构建了 HRMS Enterprise Frontend。这是一个功能完备的 RBAC 权限管理系统，但它没有引入任何第三方 UI 组件库，也没有使用 vue-i18n。

本文将分享在这个项目中，通过回归 Vue 3 Composition API 和 CSS 变量设计系统，实现的一个轻量、可控且高性能的前端架构。

项目概览

• 项目名称：HRMS Enterprise Frontend

• 核心技术栈：Vue 3.5 + Vite 6 + Pinia + Axios

• 架构特点：

  • 零 UI 依赖：全站组件（模态框、表格、表单）基于原生 CSS 开发。

  • 原生响应式 i18n：仅用 30 行代码基于 Composition API 实现国际化。

  • 标准化 RBAC：基于 JWT 和 Vue Router 守卫的角色权限控制。

技术复盘：回归原生的力量

1. 构建轻量级 Design System（设计系统）

脱离了 Element Plus，我们如何保证全站风格的统一？答案是 CSS 变量（CSS Custom Properties）。

在 src/assets/styles.css 中，我定义了一套完整的设计令牌（Design Tokens）。与 Tailwind 这种通用的原子类不同，我构建的是一套具有业务语义的原子类体系。

CSS

:root {
  /* 语义化色彩体系，而非简单的红绿蓝 */
  --color-primary: #2563eb;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* 统一间距与圆角，拒绝魔术数值 */
  --spacing-md: 1rem;
  --radius-lg: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* 抽象出的原子类 */
.card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  transition: all var(--transition-base);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

实践价值：这种做法使得整个样式表极其轻量，且修改全站主题色只需改动根变量，性能开销远低于运行时生成样式的 CSS-in-JS 方案。

2. Composition API 实战：手写微型国际化库

在一个中小型项目中，引入 vue-i18n 往往显得“杀鸡用牛刀”。利用 Vue 3 的 ref 和闭包特性，我们可以轻松实现一个响应式的国际化钩子。

这是项目中 src/utils/i18n.js 的核心实现：

JavaScript

import { ref } from 'vue';

// 状态持久化
const currentLocale = ref(localStorage.getItem('locale') || 'zh');

const messages = {
  zh: { 
      'welcome': '欢迎回来',
      'logout': '退出登录'
  },
  en: { 
      'welcome': 'Welcome Back',
      'logout': 'Logout'
  }
};

export function useI18n() {
  // 核心函数：基于当前 locale 响应式返回文本
  const t = (key) => {
    // 实际生产中可在此扩展对嵌套对象（如 'menu.home'）的解析支持
    return messages[currentLocale.value]?.[key] || key;
  };

  const setLocale = (locale) => {
    currentLocale.value = locale;
    localStorage.setItem('locale', locale);
  };

  return { t, locale: currentLocale, setLocale };
}

在组件中使用时，只需 const { t } = useI18n()，当 currentLocale 变化时，所有使用 t() 的模板会自动重新渲染。这完美展示了 Vue 3 响应式系统的精髓：数据驱动视图，无需手动操作 DOM。

3. 工程化与权限控制 (RBAC)

项目采用了标准的工程化分层结构，不仅处理了路由权限，还为后续的按钮级权限（指令控制）预留了接口。

• stores/auth.js：利用 Pinia 管理用户状态和 JWT Token。

• router/index.js：实现了基于 Meta 元信息的路由守卫。

JavaScript

// 路由守卫逻辑片段
router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore();
  
  // 1. 登录态校验
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    return next('/login');
  }

  // 2. 角色权限校验 (RBAC)
  // 确保用户角色具备访问该路由的权限
  if (to.meta.role && authStore.user.role !== to.meta.role) {
    console.warn('Unauthorized access attempt');
    return next('/dashboard');
  }

  next();
});

这套逻辑虽然基础，但它是所有企业级应用的安全基石。相较于逻辑复杂且难以调试的动态路由加载方案，这种显式的路由守卫在维护性和可读性上往往更具优势，特别是在中型项目中。

结语

在组件库极其成熟的今天，选择“手写”并非是为了重复造轮子，而是为了保持对技术的敏感度和掌控力。

HRMS Enterprise Frontend 项目展示了：当我们剥离掉层层封装的第三方依赖后，Vue 3 本身依然足够强大、优雅。对于正在学习前端架构或希望摆脱“调包工程师”标签的开发者而言，这或许是一个值得参考的极简主义范本。

如果您对这个“纯净版”的架构感兴趣，或者对原生 CSS 方案有不同的见解，欢迎在评论区交流，也欢迎查阅我的源码。

GitHub 仓库地址：https://github.com/Marshmallowc/hrms-frontend.git

---