一、开源项目简介
SoybeanAdmin
SoybeanAdmin 是一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件,代码规范严谨,实现了自动化的文件路由系统。此外,它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。
二、开源协议
使用MIT开源协议
三、界面展示
示例图片
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-2 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-19.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-3 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-21.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-4 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-20.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-5 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-22.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-6 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-23.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-7 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-24.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-8 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-25.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-9 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-26.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-10 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-27.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-11 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-28.png)
![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-12 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640-29.png)
四、功能概述
A clean, elegant, beautiful and powerful admin template, based on Vue3, Vite5, TypeScript, Pinia and UnoCSS.
一个清新优雅、高颜值且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。
特性
- 前沿技术应用
采用 Vue3, Vite7, TypeScript, Pinia 和 UnoCSS 等最新流行的技术栈。 - 清晰的项目架构
采用 pnpm monorepo 架构,结构清晰,优雅易懂。 - 严格的代码规范
遵循 SoybeanJS 规范,集成了eslint, prettier 和 simple-git-hooks,保证代码的规范性。 - TypeScript
支持严格的类型检查,提高代码的可维护性。 - 丰富的主题配置
内置多样的主题配置,与 UnoCSS 完美结合。 - 内置国际化方案
轻松实现多语言支持。 - 自动化文件路由系统
自动生成路由导入、声明和类型。更多细节请查看 Elegant Router。 - 灵活的权限路由
同时支持前端静态路由和后端动态路由。 - 丰富的页面组件
内置多样页面和组件,包括403、404、500页面,以及布局组件、标签组件、主题配置组件等。 - 命令行工具
内置高效的命令行工具,git提交、删除文件、发布等。 - 移动端适配
完美支持移动端,实现自适应布局。
五、技术选型
使用
环境准备
确保你的环境满足以下要求:
- git
你需要git来克隆和管理项目版本。 - NodeJS
>=20.19.0,推荐 20.19.0 或更高。 - pnpm
>= 10.5.0,推荐 10.5.0 或更高。
克隆项目
git clone soybean-admin
安装依赖
pnpm i
由于本项目采用了 pnpm monorepo 的管理方式,因此请不要使用 npm 或 yarn 来安装依赖。
启动项目
pnpm dev
构建项目
pnpm build
代码同步
参考 代码同步 文档。

![[开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案-1 [开源]一个清新优雅、高颜值且功能强大的后台管理系统,一站式的后台管理解决方案](https://www.baicxx.com/wp-content/uploads/2025/11/640.jpg)
