10k star！一款清新优雅的后台管理系统，很赞！

今天给大家分享的开源项目是一个优雅清新后台管理系统——Soybean Admin。

简介

Soybean Admin是一个基于Vue3、Vite3、TypeScript、NaiveUI、Pinia和 UnoCSS的清新优雅的后台管理系统模板。它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的后台前端解决方案，也可用于学习参考

特性

1. 前沿技术应用：我们采用了Vue3, Vite5, TypeScript, Pinia和UnoCSS等最新的流行技术栈，以确保项目的先进性和稳定性。
2. 清晰的项目架构：我们使用了pnpm monorepo架构，使得项目结构清晰、优雅且易于理解。
3. 严格的代码规范：我们遵循SoybeanJS规范，并集成了eslint, prettier和simple-git-hooks，以确保代码的规范性和一致性。
4. TypeScript支持：我们支持严格的类型检查，以提高代码的可维护性。
5. 丰富的主题配置：我们内置了多样的主题配置，并与UnoCSS完美结合，以满足不同用户的需求。
6. 内置国际化方案：我们轻松实现了多语言支持，方便用户使用不同的语言环境。
7. 自动化文件路由系统：我们自动生成路由导入、声明和类型，更多细节请查看Elegant Router。
8. 灵活的权限路由：我们同时支持前端静态路由和后端动态路由，以满足不同场景的需求。
9. 丰富的页面组件：我们内置了多样的页面和组件，包括403、404、500页面，以及布局组件、标签组件、主题配置组件等，以提供更丰富的功能。
10. 命令行工具：我们内置了高效的命令行工具，方便用户进行git提交、删除文件、发布等操作。
11. 移动端适配：我们完美支持移动端，实现了自适应布局，以提供更好的移动用户体验。

项目展示

接下来，小编带大家一起来看看项目预览。

登录界面

仪表盘

文档

内置各种组件

内置了丰富多样的组件，供我们日常使用。比如各种类型的按钮、卡片和表格等，如下图：

各类插件

整合了各种常用的插件，包括图表、地图、视频、编辑器和图标等。通过引入相应的组件和库，即可在项目中轻松使用，如下图所示：

异常页面

为常见的异常页面（403、404、500）提供了个性化的设计，让用户在遇到问题时也能感受到一丝惊喜和趣味。

主题配色

提供了丰富多样的主题配色，并且支持个性化的界面功能设置。用户可以根据自己的需求，选择合适的主题和界面样式，如下图所示：

深色模式

还支持深色模式，可以在不同的环境和偏好下，切换界面的明暗色调，以获得更加舒适的视觉体验。

安装使用

要在本地使用Soybean Admin，首先需要确保安装了需要安装 pnpm 7.x 、Node.js 14.18+ 和 Git。然后按照以下步骤进行操作：

1. 克隆项目代码：

git clone https://github.com/honghuangdc/soybean-admin.git

2. 安装依赖：

pnpm i

3. 运行项目：

pnpm dev

4.打包

pnpm build

如果你想使用Docker进行部署，可以执行以下命令：

docker build -t soybean-admin-image -f docker/Dockerfile .
docker run -d -p 80:80 soybean-admin-image

然后打开本地浏览器，访问http://localhost，即可访问Soybean Admin了。

需要注意的是，官方推荐使用Chrome 90+浏览器进行开发和浏览，不支持IE浏览器。

关于项目的更多内容，感兴趣的小伙伴可以去项目地址探索~~~

项目地址：

https://github.com/honghuangdc/soybean-admin