基于react+antd的后台管理模板

# 基于react+antd的后台初步框架
github地址:https://github.com/xjc-opensource/react-admin-example
gitee地址:https://opensource-xjc/react-admin-example
预览地址:[预览地址](https://xjc-opensource.github.io/react-admin-example/)
# 1、技术栈
 - react-create-app
 - react
 - react-router
 - react-intl
 - react-load-script
 - axios
 - mockjs
 - antd
 - babel
 - redux / mobx
 - eslint
 - sass
# 2、框架初始化
2.1 安装插件  
``` 
  npm remove -g create-react-app
  npm install -g create-react-app
  create-react-app react-admin-example
  
  npm install --save react-router-dom  
  npm install --save react-load-script  
  npm install --save antd  
  npm install --save-dev babel-plugin-import
  npm install --save-dev @babel/plugin-proposal-decorators
  npm install --save node-sass 
    
  npm install --save axios  
  npm install --save mockjs 
  npm install --save axios-mock-adapter
  
  npm install --save redux
  npm install --save react-redux
  npm install --save redux-thunk
  
  
  npm install --save react-loadable
  npm install --save nprogress
  npm install --save screenfull

  npm install --save js-md5
  npm install --save react-intl 
  npm install --save intl  
``` 

2.2 自定义配置构建脚本  
``` 
  npm run eject  
  须确保所有文件都已提交git,否则会报错:
     This git repository has untracked files or uncommitted changes
```
     
2.3 调整配置
``` 
  # 发布目录可以非根目录: package.json加 "homepage": "."
  # 按需加载antd样式: .babelrc
  # decorators语法支持: .babelrc
  # 调整打包输出目录(config/paths.js):
    appBuild: resolveApp('build') 
    调整为 
    appBuild: resolveApp('docs')
  # 加入别名: (config/webpack.config.js)
     alias: {
     '@': paths.appSrc,
     }
``` 

# 3、文件目录
```
* docs - 打包文件
* config - 环境配置文件
* public - 公用文件(不参与打包处理,打包前后文件名不变化)
* scripts - 不同环境脚本
* src - 源码文件
    * api - 调用接口地址
    * assets - 公用文件
    * compenents - 公用组件
    * core - 
      * envconfig.js -不同环境下的变量配置
    * demo - 演示例子
    * mock - 模拟接口返回
    * router - 路由
    * utils - 通用工具类
    * views - 页面
    * app.js - 页面入口
    * main.js - 加载入口
* README.md - 项目说明
* README-modify.md - 更新记录
```

你可能感兴趣的:(react,antd,后台模板)