React后台

react-admin-template — React 后台模板

作者 woleicom

基于 React 与 Ant Design 的后台管理系统脚手架，包含国际化、路由、Redux、动态菜单权限与页面状态缓存等模块，可用于二次开发。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图

作者提供的预览

查看源码在新标签页打开

作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

集成 Ant Design 并支持自定义 theme，界面样式参考 antd-admin-pro

集成 react-router，按角色自动配置菜单与路由权限，面包屑由菜单自动生成

集成 react-intl 国际化，可在导航头切换语言

提供 utils/pageState 缓存页面状态，基于全局变量，刷新后失效

用 rescripts 重写 create-react-app 的 webpack 配置，并提供 eslint、babel、postcss、browserslist、env 等独立配置文件

打包时显示进度条，并自动压缩、按项目名与打包时间命名产物

模板详细介绍

这是一个面向后台管理系统的 React 脚手架模板，作者定位为「二次开发」用途。技术栈以 React 与 Ant Design 为主，界面样式参考 antd-admin-pro，并集成了 react-router、Redux、react-intl 国际化以及 mock 数据。

权限方面，模板根据角色自动配置菜单和路由，权限数据以前端测试数据的形式写在 api 中；导航面包屑由用户菜单自动生成，不需要在页面里手动配置。模板还提供 utils/pageState 工具用于缓存页面状态，该缓存保存在全局变量中而非 storage，因此刷新页面后失效。

工程配置上，模板用 rescripts 重写 create-react-app 的 webpack 配置，并分别提供 .rescripts、.eslintrc、.babelrc、.postcssrc.js、.browserslistrc 与 .env.* 等配置文件；增加了 webpack 编译打包进度条、@ 指向 src 的路径别名，以及打包后自动压缩并按项目名与打包时间命名的插件。

兼容性方面，IE10、IE11 支持默认关闭，需按 README 说明修改 src/index.js、.babelrc、.browserslistrc 等配置开启；IE 兼容维护在单独分支且已不再维护。README 中作者也说明 Redux 与 hooks 的 useReducer 规整可能不够理想，登录跳转仅依据 userInfo.id 是否存在判断。演示登录账号为 admin 或任意账号，密码任意填写，两个账号权限不同。

React后台

适合你的项目吗？

适用场景

需要一套带权限菜单与国际化能力的 React 后台管理界面作为起点
在 create-react-app 基础上希望调整 webpack、babel、postcss 等构建配置
需要按角色区分菜单与路由权限的后台系统原型
需要中英文切换等国际化能力的内部管理页面

适合人群

准备在现有 React 后台模板上做二次开发的团队
使用 Ant Design 构建后台管理界面的项目
需要动态菜单与路由权限控制的后台系统
需要国际化与 mock 数据支持的前端原型开发

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
启动前台服务使用 npm run start，打包 staging 环境使用 npm run build:stag，打包正式环境使用 npm run build
2
演示登录账号为 admin 或任意账号，密码任意填写，两个账号权限不同
3
权限判断使用 api 中的前端测试数据，接入真实后端时需替换
4
IE10、IE11 兼容默认关闭，需按 README 修改 src/index.js、.babelrc、.browserslistrc 等配置开启，且 IE 分支已不再维护
5
pageState 缓存不写入 storage，刷新页面后状态失效

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

IE10/IE11 兼容默认关闭，需手动修改 src/index.js、.babelrc、.browserslistrc 等配置才能开启；且 IE 兼容维护在单独分支，已不再维护。
菜单与路由权限使用 api 中的前端测试数据，并非真实后端权限系统，接入生产环境时需自行替换为真实权限接口。
pageState 页面状态缓存仅存于全局变量，不写入 storage，刷新页面后缓存失效。
演示登录为前端 mock 账号，密码任意填写，两个账号权限不同，仅用于演示，不可作为真实鉴权使用。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

兼容IE10、11默认关闭（通过注释src/index.js、.babelrc、.browserslistrc配置）
README 原文

权限在api中前端设置的测试数据
README 原文

增加utils/pageState缓存页面状态全局变量工具，没有存储storage，刷新无效
README 原文

登录账号：admin/密码随便填或账号随便填/密码随便填（两个账号权限不一样）
README 原文

https://github.com/woleicom/react-admin-template/blob/master/LICENSE https://github.com/woleicom/react-admin-template/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 60 / 100
技术栈: React
网站类型: 后台

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2020-09-08
截图检查日期: 2026-10-02

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: f843cee2e97e2702bdd89fad1d58ada2ec3f82fbe773b6557998cb1fa2ff5f41

2026-10-02T10:02:48.430Z

来源文件 / 仓库

# react开发脚手架二次开发后台管理系统模板
#### 简介： React 16.x、Ant Design 4.x、国际化、router、redux、ui仿antd-admin-pro、动态路由、动态菜单权限、页面状态缓存
## 作者： 月下独奏
### [更新日志](./note/updatelog.md)
##### 个人认为舒服的cli会提升开发的幸福度，所以部分习惯参考了vue-cli
##### 如果喜欢vue建议参考项目:[woleicom/vue-admin-template](https://github.com/woleicom/vue-admin-template)
##### 如果喜欢vue建议直接选择vue element admin,已经做得很好了，不需要在二次开发了
-----------
### 感谢：
- [React 16](https://reactjs.org/)
- [Ant Design 4](https://ant.design/)
-----------
### 优化内容（所有依赖库基于2020年第一季度最新包版本）
- 用rescripts库重写create-react-app cli的webpack配置部分(配置更方便，可读性更好)
- .rescripts配置rescripts配置
- .eslintrc配置eslint规则(文件中已备注可以忽略eslint校验规则的备注，打开注释即可忽略校验)
- .babelrc配置babel配置
- .postcssrc.js配置postcss配置
- .browserslistrc配置浏览器支持
- .env.*配置不同--mode模式下的环境变量
- 增加webpack编译打包进度条
- 增加@指向src目录快捷访问文件夹和文件
- 增加webpack end 插件，自动压缩打包文件并命名项目名称和打包日期时间
- 集成antd并可自定义theme
- UI参考antd admin pro(并不太喜欢antd admin pro脚手架，但是样式没得说，很漂亮)
- 集成react-router,并根据角色自动配置菜单和路由权限（权限在api中前端设置的测试数据）
- 导航面包屑根据用户菜单自动获取，不在放到页面手动配置。
- 集成redux(因为刚接触react不到一个月，redux还不是很上手，redux跟hooks的useReducer可能规整不是很好，导致只判断了userInfo.id不存在就跳转到登录页面)
- 增加utils/pageState缓存页面状态全局变量工具，没有存储storage，刷新无效
- 集成i18n国际化（使用react-intl集成国际化，导航头切换语言，首页查看效果）

### 开发中兼容性(IE兼容在单独IE分支，不在维护)
- 兼容IE10、11默认关闭（通过注释src/index.js、.babelrc、.browserslistrc配置）
- 兼容到IE11（通过babel兼容）
- 兼容到IE10（pulic/index.html注释需要打开，因为在开发过程中create-react-app引入了一个只针对node环境的颜料库，导致在IE10中缺少相关函数对象，需要在全局静态配置polyfill，而在src中引入无效，如果只需要生产环境支持，则不需要，打包后会自动过滤掉，html中也根据是否development进行判断了）
### 相关命令
```
//启动前台服务
npm run start
//打包staging环境
npm run build:stag
//打包正式环境
npm run build
```
-------------
##### 登录账号：admin/密码随便填 或 账号随便填/密码随便填  （两个账号权限不一样）
### 展示
![登录页](./note/react0.png)
![首页](./note/react1.png)

反馈内容错误