# vue3-admin **Repository Path**: zheng_zhuang/vue3-admin ## Basic Information - **Project Name**: vue3-admin - **Description**: 前端基于 Soybean Admin二次开发,后端基于 Nest.js + Prisma 的全栈后台应用 - **Primary Language**: TypeScript - **License**: Not specified - **Default Branch**: main - **Homepage**: https://vue3.baiwumm.com/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 28 - **Created**: 2025-01-07 - **Last Updated**: 2025-01-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

Vue3 Admin

Vue3 Admin

前端的全栈之路

## ☘️ 项目简介 [Vue3 Admin](https://vue3.baiwumm.com/) 是一个前端基于 [Soybean Admin](https://docs.soybeanjs.cn/) 二次开发,后端基于 [Nest.js](https://nestjs.com/) 的全栈后台应用,适合学习全栈开发的同学参考学习。 - 🍁 前端技术栈: [Vue3.5](https://cn.vuejs.org/)、[Ant Design Vue](https://www.antdv.com/)、[UnoCSS](https://unocss.dev/)、[Pinia](https://pinia.vuejs.org/) - 🍁 后端技术栈: [Nest.js](https://nestjs.com/)、[PostgreSQL](https://www.postgresql.org/)、[Prisma](https://prisma.yoga/) - 🍂 线上预览: https://vue3.baiwumm.com/ - 🍃 用户名:**Admin**,密码:**abc123456** - [🪹 github 仓库地址](https://github.com/baiwumm/vue3-admin/) - [🪺 码云仓库地址](https://gitee.com/baiwumm/vue3-admin/) - [🍀 Swagger 接口文档](https://vue3.baiwumm.com/docs) - ❤️ star:**如果可以的话,请顺手给个star,表示对作者的鼓励,万分感谢!** ## 🌿 系统功能设计 1. 动态国际化语言配置 2. 记录登录用户的 `CURD` 操作日志 3. 用户和角色权限的一对一映射,根据角色关联的菜单权限生成动态路由菜单 4. 登录用户发布消息公告,后端使用 `SSE` 推送,可登录多个用户查看效果 5. 前端常见的一些实用的业务功能或者一些有趣的效果 ## 🌳 环境和依赖 > 推荐本项目使用 [pnpm](https://github.com/pnpm/pnpm/) 包管理工具 - [Git](https://git-scm.com/) (你需要git来克隆和管理项目版本) - [Node.js](https://nodejs.org/) (Node.js 版本要求 >= 18.12.0,推荐 18.19.0 或更高) - [Pnpm](https://github.com/pnpm/pnpm/) (>= 8.7.0,推荐最新版本) - [PostgreSQL](https://www.postgresql.org/) (推荐最新版本) ## 🌴 项目运行 1. 安装 [PostgreSQL](https://www.postgresql.org/) 数据库,并导入 `/postgreSQL` 中的文件,修改 `/server/env` 文件中的数据库配置,这一步要保证成功,不然后端服务起不来 ```powershell DATABASE_URL="postgresql://postgres:123456@localhost:5432/vue3-admin?schema=public" ``` 2. 拉取项目代码 ```powershell git clone https://github.com/baiwumm/vue3-admin.git cd vue3-admin // 进入前端 cd web // 进入后端 cd server ``` 3. 安装依赖 ```powershell npm install -g pnpm pnpm install ``` 4. 开发模式运行 ```powershell // 前端启动 pnpm dev // 后端启动:开发模式 pnpm start:dev ``` 5. 编译项目 ```powershell pnpm build ``` ## 🌵 新增路由菜单 1. 在 `web/src/views` 目录下新建 `文件夹/index.vue` 文件 2. 在菜单 `系统管理-国际化-route` 中添加路由配置 3. 在菜单 `系统管理-菜单管理` 中按照规则添加菜单,可打开多个标签页参考,路由配置参考:[系统路由](https://docs.soybeanjs.cn/zh/guide/router/intro.html) 4. 在菜单 `系统管理-角色管理` 中编辑状态中勾选相应的菜单,保存刷新页面,即可看到路由菜单生效 ## 🌱 功能模块 ``` - 登录 / 注销 - 首页 - 智能行政 - 消息公告 - 组织管理 - 岗位管理 - 组织架构 - 个人中心 - 功能页 - 验证码 - 打印 - 拾色器 - 甘特图 - 图片预览 - 自定义 Vue 指令 - 懒加载 - 图片取色盘 - 系统级取色器 - 文件预览 - 流程图 - 瀑布流 - Swiper - 技术文档 - Soybean(内链) - Vue3 - Nest.js - Ant Design Vue - UnoCSS - 系统设置 - 用户管理 - 菜单管理 - 角色管理 - 国际化 - 操作日志 - 关于 ``` ## 🪴 演示图 | ![](./web/src/assets/demo/1.jpg) | ![](./web/src/assets/demo/2.jpg) | | ------------------------------------------------------------ | ------------------------------------------------------------ | | ![](./web/src/assets/demo/3.jpg) | ![](./web/src/assets/demo/4.png) | | ![](./web/src/assets/demo/5.jpg) | ![](./web/src/assets/demo/6.jpg) | | ![](./web/src/assets/demo/7.jpg) | ![](./web/src/assets/demo/8.jpg) | | ![](./web/src/assets/demo/9.jpg) | ![](./web/src/assets/demo/10.jpg) | | ![](./web/src/assets/demo/11.jpg) | ![](./web/src/assets/demo/12.jpg) | | ![](./web/src/assets/demo/13.jpg) | ![](./web/src/assets/demo/14.jpg) | | ![](./web/src/assets/demo/15.jpg) | ![](./web/src/assets/demo/16.jpg) | ## 🍄 总结 1. 本项目没有经过严格的测试,有可能存在一定的 `Bug`。 2. 本项目仅供学习交流使用,请勿用于商业用途。 3. 欢迎提交 [Issues](https://github.com/baiwumm/vue3-admin/issues) 和 [PR](https://github.com/baiwumm/vue3-admin/pulls),一起完善本项目。 ## ⭐ Star History [![Star History Chart](https://api.star-history.com/svg?repos=baiwumm/vue3-admin&type=Date)](https://star-history.com/#baiwumm/vue3-admin&Date)