Vue3 Admin

前端的全栈之路 - 现代化后台管理系统解决方案

📚 项目简介

Vue3 Admin 是一个现代化的全栈后台管理系统，前端基于 Soybean Admin 二次开发，后端采用 Nest.js 构建。本项目集成了当前流行的前后端技术栈，是学习全栈开发的理想参考项目。

🚀 技术栈

前端：Vue 3.5、Ant Design Vue、UnoCSS、Pinia
后端：Nest.js、PostgreSQL、Prisma

🔗 快速链接

📌 在线预览：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	-	最新版	关系型数据库

🚀 快速开始

1. 数据库配置

# 安装 PostgreSQL 数据库
# 导入 /postgreSQL 目录中的数据文件
# 修改 /server/.env 文件中的数据库连接配置
DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue3-admin?schema=public"

2. 克隆项目

# 克隆仓库
git clone https://github.com/baiwumm/vue3-admin.git
cd vue3-admin

3. 安装依赖

# 全局安装 pnpm (如果尚未安装)
npm install -g pnpm

# 前端依赖安装
cd web
pnpm install

# 后端依赖安装
cd ../server
pnpm install

4. 开发模式

# 前端开发服务
cd web
pnpm dev

# 后端开发服务
cd server
pnpm start:dev

5. 构建项目

# 前端构建
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

- 系统设置
  - 用户管理
  - 菜单管理
  - 角色管理
  - 国际化
  - 操作日志

- 关于