点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
哈喽，大家好，我是
xy👨🏻💻。今天给大家分享一款清新优雅、功能强大且极具美感的后台管理系统模板——React-SoybeanAdmin！
历经 5 个月的持续优化和改进，React-SoybeanAdmin 1.0 终于与大家见面了！该项目基于 Soybean(9.8kstar)构建，采用了 React 技术栈，打造了一款清新优雅、功能强大且极具美感的后台管理系统模板。它集合了多种前沿技术，如 React18、React-Router v6、Vite5、TypeScript、Ant Design 和 UnoCSS，能够提供一个开箱即用的后台管理解决方案，同时也是学习现代前端技术的优秀实践。
项目亮点
前沿技术栈：采用最新的 React18、React Router v6、Vite5、TypeScript、Redux Toolkit、Ant Design 和 UnoCSS，确保技术紧跟潮流，提供最佳的开发体验。
强大的路由扩展：基于 React-Router V6 扩展了路由 API，提供类似 Vue-Router 的便捷使用体验，让路由管理更加灵活高效。
模块化架构：项目采用了
pnpm monorepo架构，结构清晰易懂，方便开发者快速上手并进行模块化扩展。严格的代码规范：集成了
eslint、prettier和simple-git-hooks，并采用 SoybeanJS 规范，确保代码风格统一，提升团队协作效率。TypeScript 类型支持：项目通过支持严格的类型检查和内置类型推导，使得开发者可以轻松享受到高效的类型提示，大幅提升代码的可读性和维护性。
丰富的主题配置：
React-SoybeanAdmin提供了高度定制化的主题选项，结合 UnoCSS 实现快速开发，支持暗黑模式等多种 UI 风格。多语言国际化支持：内置完善的国际化解决方案，轻松应对多语言场景，助力全球化项目。
灵活的权限控制：支持前端静态路由和后端动态路由，灵活处理权限问题，同时保证路由安全性。
约定式路由系统：项目采用了自动化的文件路由系统，无需手动配置路由，基于文件结构即可自动生成路由声明，减少人为错误，提高开发效率。
完善的页面和组件库：内置了丰富的页面模板与通用组件，如 403、404、500 页面，布局组件、标签组件、主题配置组件等，极大提高了开发效率。
移动端适配：项目不仅适用于桌面端，还完美支持移动端设备，提供了自适应布局。
集成 keep-alive：框架内集成了
keep-alive,只需要在对应的路由中的meta中声明{keepAlive:true},即可开启
特性详解
代码规范与架构
通过 eslint和prettier强制保持代码风格的一致性，结合simple-git-hooks实现提交前代码检查。遵循函数式编程原则，减少副作用，模块划分明确，组件放置在 components目录下，页面模块化管理，符合现代 React 开发的最佳实践。
权限路由
前端静态路由：在前端通过配置文件实现简单的权限控制，适合权限层级较少的场景。 后端动态路由：通过后端接口动态获取路由配置，适合复杂的企业级项目。 严格的权限控制流程，确保应用的安全性与灵活性。
主题与样式
系统基于 UnoCSS，提供了灵活的主题定制能力，支持快速切换主题和暗黑模式。 内置丰富的类名，如 bg-primary、text-primary，开发者可以方便地应用预定义的样式，提升开发效率。
TypeScript 实践
项目遵循 TypeScript 的最佳实践，支持全局类型声明，确保类型安全。 提供了自动类型推导和丰富的类型提示，开发者只需定义少量类型，便可享受到完整的 TypeScript 体验。
示例截图
预览与文档
预览地址：https://react-soybean.ohh-889.com/ 文档地址：https://react-soybean-docs.pages.dev/index-cn?theme=dark GitHub 仓库：https://github.com/mufeng889/react-soybean-admin Gitee 仓库：https://gitee.com/sjgk_dl/react-admin
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
回复 面试题，获取最新大厂面试资料。 回复 简历，获取 3200 套 简历模板。 回复 React 实战，获取 React 最新实战教程。 回复 Vue 实战，获取 Vue 最新实战教程。 回复 ts，获取 TypeScript 精讲课程。 回复 vite，获取 Vite 精讲课程。 回复 uniapp，获取 uniapp 精讲课程。 回复 js 书籍，获取 js 进阶 必看书籍。 回复 Node，获取 Nodejs+koa2 实战教程。 回复 数据结构算法，获取数据结构算法教程。 回复 架构师，获取 架构师学习资源教程。 更多教程资源应有尽有，欢迎 关注获取。
