功能特性
1. 权限管理
- 基于角色的权限控制 (RBAC)
- 动态路由生成
- 菜单权限过滤
- 按钮级权限控制
2. 布局系统
- 响应式布局设计
- 顶部导航栏
- 侧边菜单栏
- 面包屑导航
- 标签页导航
- 设置面板
3. 国际化支持
- 多语言切换 (中文/英文)
- 动态加载语言包
- 支持自定义语言扩展
4. 组件库
- 自定义表格组件 (scTable)
- 自定义表单组件 (scForm)
- 自定义上传组件 (scUpload)
- 其他常用业务组件
5. 系统功能
- 用户登录/注册/重置密码
- 仪表盘
- 系统设置
- 用户管理
- 角色管理
- 菜单管理
- 区域管理
安装和运行
环境要求
- Node.js >= 20.19.0 || >= 22.12.0
安装依赖
npm install
开发模式
npm run dev
项目将在 http://localhost:5173 启动。
构建生产版本
npm run build
构建后的文件将输出到 dist 目录。
预览生产版本
npm run preview
代码检查和格式化
# ESLint 检查并修复
npm run lint
# Prettier 格式化代码
npm run format
配置说明
项目的主要配置文件位于 src/config/index.js，包含以下配置项：
{
APP_NAME: 'vueadmin', // 应用名称
DASHBOARD_URL: '/dashboard', // 仪表盘URL
API_URL: 'https://www.tensent.cn/admin/', // API接口地址
TIMEOUT: 50000, // 请求超时时间
TOKEN_NAME: 'authorization', // Token名称
TOKEN_PREFIX: 'Bearer ', // Token前缀
LANG: 'zh-cn', // 默认语言
// 更多配置...
}
开发指南
路由配置
路由配置分为两部分：
- 系统基础路由 (
src/router/systemRoutes.js) - 动态生成的业务路由 (由后端菜单数据转换)
组件开发
自定义组件位于 src/components/ 目录，每个组件有独立的文件夹，包含组件文件和相关资源。
API 调用
API 接口定义位于 src/api/ 目录，使用 Axios 封装，支持拦截器、请求缓存等功能。
状态管理
使用 Pinia 进行状态管理，store 定义位于 src/stores/ 目录，支持模块化管理。
国际化
国际化配置位于 src/i18n/ 目录，支持中英文切换，可通过以下方式扩展其他语言：
- 在
src/i18n/locales/目录下添加新的语言文件 - 在
src/i18n/index.js中注册新语言
权限管理
系统采用基于角色的权限控制 (RBAC)，权限信息由后端提供，前端根据权限信息动态生成路由和菜单。
浏览器支持
- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)
注意事项
- 确保 Node.js 版本符合要求
- 开发环境下 API 请求可能需要配置代理
- 生产环境需要配置正确的 API 地址
- 首次运行需要先安装依赖
License
MIT License
更新日志
v1.6.6
- 升级 Vue 3 到 3.5.26
- 升级 Vite 到 7.3.0
- 升级 Ant Design Vue 到 4.2.6
- 优化路由管理和权限控制
- 修复已知 bug
贡献
欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！