/react-soybean-admin

A clean, elegant, beautiful and powerful react-admin template, based on React18, Vite5, TypeScript, react-router-dom v6, Antd,Redux/toolkit and UnoCSS. 一个清新优雅、高颜值且功能强大的React后台管理模板,基于最新的前端技术栈,包括 React18, Vite5, TypeScript, react-router-dom v6, Antd,Redux/toolkit和 UnoCSS。

Primary LanguageTypeScriptMIT LicenseMIT

SoybeanAdmin

English | 中文

Note

If you think React-Soybean-Admin is helpful to you, or you like our project, please give us a ⭐️ on GitHub. Your support is the driving force for us to continue to improve and add new features! Thank you for your support!

Introduction

React-Soybean-Admin is a clean, elegant, beautiful and powerful admin template, based on the latest front-end technology stack, including React18.3,React-Router-Dom v6.4,Redux/Toolkit, Vite5, TypeScript and UnoCSS. It has built-in rich theme configuration and components, strict code specifications, and an automated file routing system. In addition, it also uses the online mock data solution based on ApiFox. React-Soybean-Admin provides you with a one-stop admin solution, no additional configuration, and out of the box. It is also a best practice for learning cutting-edge technologies quickly.

Features

  • Cutting-edge technology application: using the latest popular technology stack such as React18.3,React-Router-Dom v6.4,Redux/Toolkit, Vite5, TypeScript and UnoCSS.
  • Clear project architecture: using pnpm monorepo architecture, clear structure, elegant and easy to understand.
  • Strict code specifications: follow the SoybeanJS specification, integrate eslint, prettier and simple-git-hooks to ensure the code is standardized.
  • TypeScript: support strict type checking to improve code maintainability.
  • Rich theme configuration: built-in a variety of theme configurations, perfectly integrated with UnoCSS.
  • Built-in internationalization solution: easily realize multi-language support.
  • Automated file routing system: automatically generate route import, declaration and type. For more details, please refer to Elegant Router.
  • Flexible permission routing: support both front-end static routing and back-end dynamic routing.
  • Rich page components: built-in a variety of pages and components, including 403, 404, 500 pages, as well as layout components, tag components, theme configuration components, etc.
  • Command line tool: built-in efficient command line tool, git commit, delete file, release, etc.
  • Mobile adaptation: perfectly support mobile terminal to realize adaptive layout.

Vue Version

Vue Documentation

Example Images

Usage

Environment Preparation

Make sure your environment meets the following requirements:

  • git: you need git to clone and manage project versions.
  • NodeJS: >=18.12.0, recommended 18.19.0 or higher.
  • pnpm: >= 8.7.0, recommended 8.14.0 or higher.

Clone Project

git clone https://github.com/mufeng889/react-soybean-admin.git

Install Dependencies

pnpm i

Since this project uses the pnpm monorepo management method, please do not use npm or yarn to install dependencies.

Start Project

pnpm dev

Build Project

pnpm build

How to Contribute

We warmly welcome and appreciate all forms of contributions. If you have any ideas or suggestions, please feel free to share them by submitting pull requests or creating GitHub issue.

Git Commit Guidelines

This project has built-in commit command, you can execute pnpm commit to generate commit information that conforms to Conventional Commits specification. When submitting PR, please be sure to use commit command to create commit information to ensure the standardization of information.

Browser Support

It is recommended to use the latest version of Chrome in development for a better experience.

IE  Edge Firefox Chrome Safari
not support last 2 versions last 2 versions last 2 versions last 2 versions

OpenSource Author

Ohh Soybean

Contributors

Thanks the following people for their contributions. If you want to contribute to this project, please refer to How to Contribute.

Communication

SoybeanAdmin is a completely open source and free project, helping developers to develop medium and large-scale management systems more conveniently. It also provides WeChat and QQ communication groups. If you have any questions, please feel free to ask in the group.

QQ Group

Add the following WeChat to invite to the WeChat group

Add Soybean's WeChat for business consultation, cooperation, project architecture, one-on-one guidance, etc.

License

This project is based on the MIT © 2021 Soybean protocol, for learning purposes only, please retain the author's copyright information for commercial use, the author does not guarantee and is not responsible for the software.