# react-admin-template

**Repository Path**: pearpear/react-admin-template

## Basic Information

- **Project Name**: react-admin-template
- **Description**: 自己搭建的react后台基础模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-12
- **Last Updated**: 2023-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-admin-template

#### 介绍
react后台基础模板
1. ant-design作为ui库✔️
2. less模块化，类名前缀加入base64，避免样式污染✔️
3. 利用craco对webpack进行配置,避免暴露出webpack✔️
4. axios mock,我这里无法mock Status Code的拦截✔️
5. [免费的在线mock平台——————fastmock](https://marvengong.gitee.io/fastmock/#/)✔️
6. 仅基于useContext、useReducer(完全借鉴了同事的实现思路,有些地方我自己也没完全理解，我还需要进一步学习)实现redux效果✔️
7. 菜单、路由、地址栏状态联动✔️
8. 菜单、路由根据角色在前端处理权限✔️
9. 面包屑功能✔️
10. 项目开发完毕✔️

新功能:
11. 解析上传本地excel，并在线生成表格，可进行编辑，添加，删除操作✔️

![Image text](https://gitee.com/pearpear/react-admin-template/raw/master/src/assets/image/readme.png);
![Image text](https://gitee.com/pearpear/react-admin-template/raw/master/src/assets/image/readme2.png);

新增rem适配
- npm install postcss-px2rem-exclude@0.0.6
- craco.config.js => 
  const px2rem = require('postcss-px2rem-exclude');
  style: {
    postcss: {
      loaderOptions: {
        ident: 'postcss',
        plugins: () => [
          px2rem({
            remUnit: 160
          })
        ],
      },
    }
  },
- index.html的匿名函数
- 默认根据1920配置  160 * 12 = 1920