Vue3 Admin 是一个现代化的全栈后台管理系统,前端基于 Soybean Admin 二次开发,后端采用 Nest.js 构建。本项目集成了当前流行的前后端技术栈,是学习全栈开发的理想参考项目。
- 📌 在线预览:https://vue3.baiwumm.com/
- 🔑 测试账号:用户名
Admin,密码abc123456 - 📝 API文档:Swagger 接口文档
❤️ 如果这个项目对你有帮助,请给个 Star 支持作者,感谢!
- 🌐 动态国际化:支持多语言配置,轻松切换不同语言环境
- 📝 操作日志记录:自动记录用户的 CRUD 操作,方便追踪和审计
- 🔐 完善的权限系统:用户与角色的精确映射,基于角色动态生成路由菜单
- 📢 实时消息通知:基于 SSE (Server-Sent Events) 的消息公告推送系统
- 🧩 丰富的业务组件:集成多种实用的业务功能和交互效果
- 🎨 现代化 UI 设计:基于 Ant Design Vue 的美观界面,提供良好的用户体验
💡 推荐使用 pnpm 作为包管理工具
| 依赖项 | 最低版本 | 推荐版本 | 说明 |
|---|---|---|---|
| Node.js | 18.12.0 | 18.19.0+ | JavaScript 运行环境 |
| Pnpm | 8.7.0 | 最新版 | 高效的包管理工具 |
| Git | - | 最新版 | 版本控制工具 |
| PostgreSQL | - | 最新版 | 关系型数据库 |
# 安装 PostgreSQL 数据库 # 导入 /postgreSQL 目录中的数据文件 # 修改 /server/.env 文件中的数据库连接配置 DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue3-admin?schema=public"
# 克隆仓库 git clone https://github.com/baiwumm/vue3-admin.git cd vue3-admin
# 全局安装 pnpm (如果尚未安装) npm install -g pnpm # 前端依赖安装 cd web pnpm install # 后端依赖安装 cd ../server pnpm install
# 前端开发服务 cd web pnpm dev # 后端开发服务 cd server pnpm start:dev
# 前端构建 cd web pnpm build # 后端构建 cd server pnpm build
-
创建视图文件
- 在
web/src/views目录下新建文件夹/index.vue文件
- 在
-
配置国际化路由
- 进入系统 → 系统管理 → 国际化 → route
- 添加对应的路由配置
-
添加菜单项
- 进入系统 → 系统管理 → 菜单管理
- 按照规则添加新菜单
- 路由配置参考:Soybean Admin 系统路由文档
-
分配权限
- 进入系统 → 系统管理 → 角色管理
- 在编辑状态中为相应角色勾选新增的菜单
- 保存并刷新页面,新菜单将会生效
- 登录 / 注销
- 首页
- 智能行政
- 消息公告
- 组织管理
- 岗位管理
- 组织架构
- 个人中心
- 功能页
- 验证码
- 打印
- 拾色器
- 甘特图
- 图片预览
- 自定义 Vue 指令
- 懒加载
- 图片取色盘
- 系统级取色器
- 文件预览
- 流程图
- 瀑布流
- Swiper
- 技术文档
- Soybean(内链)
- Vue3
- Nest.js
- Ant Design Vue
- UnoCSS
- 系统设置
- 用户管理
- 菜单管理
- 角色管理
- 国际化
- 操作日志
- 关于
- 本项目主要用于学习和技术交流,可能存在一些未经严格测试的功能点
- 仅供学习和个人非商业用途使用
- 欢迎通过 Issues 提交问题反馈
- 欢迎提交 Pull Requests 参与项目改进
本项目基于 MIT许可证 开源。