/admin-react-antd-example

基于React-Antd的后台管理系统; 将使用webpack3+Redux+React-router4+styled-components+ESlint4

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

长江中心 - 物业管理系统 - V2.0版本

脚手架模型来自 react-admin

NPM 版本请 升级到 5.0.3 以上

Nodejs 版本 尽量使用 7.9.0 版本以上

开发环境, 请务必使用 chrome 作为调试浏览器; 并且安装 react-devtoolsredux-devtools 调试插件;

使用技术:

技术名称 作用 版本
React 视图库 15.5.4
AntDesign UI框架 2.10.4
Redux 状态管理 3.6.0
React-router 路由管理 3.0.2
Axios 交互处理 0.16.1
Less 样式预处理器(AntD) 2.7.2
Sass 样式预处理器 4.5.2
webpack 模块打包 1.14.0
Babel ES6转译ES5 6.24.1
Mockjs 模拟接口 1.0.1-beta3
Elf-ES ES版本Elf(管理样式) 2.2.1

使用插件:

插件名称 作用 版本
babel-plugin-import AntD 加载组件模块 1.2.1
echarts-for-react 基于React对echarts封装的可视化图表 1.4.1
nprogress 顶部加载条 0.2.0
react-draft-wysiwyg ReactJS和DraftJS库构建的Wysiwyg编辑器 1.10.0
react-draggable 拖拽模块(简单版) 2.2.6
react-quill React的 Quill组件(富文本) 1.0.0-rc.2
recharts 另一个基于React封装的echarts图表(备用) 1.0.0-alpha.0
screenfull 全屏插件 3.2.0
styled-components 样式组件 2.0.0
polished CSS in JS功能插件(可以用js写CSS, 内部封装函数) 1.1.3
animate.css CSS3 动画功能 3.5.2
qs 字符串解析库(配合axios) 6.4.0
moment JS处理 / 操作 / 转换 时间日期 2.18.1
hotcss 移动端布局终极解决方案 2.2.1

目录结构

借鉴: Redux + React 应用程序架构的 3 条规范(内附实例)

借鉴: React + Redux 最佳实践

借鉴: Redux状态管理之痛点、分析与改良

├── build /                         # 打包的文件目录
├── config /                        # webpack配置
├—— node_modules /                  # npm安装依赖目录
├── public /                        # 静态文件
│   ├── favicon.ico                 |   # 网页图标
│   ├── index.html                  |   # 入口 HTML文件
│   ├── npm.json                    |   # echarts测试数据
│   └── weibo.json                  |   # echarts测试数据
├── scripts /                       # webpack 配置文件
│   ├── build.js                    |   # webpack - '打包'配置
│   ├── start.js                    |   # webpack - '开发'配置
│   └── test.js                     |   # webpack - '测试'配置
├── src /                           # 开发目录
│   └── index.js                    |   # 项目的整体js入口文件, 配置插件
├── .babelrc                        # Babel 配置
├── .editorconfig                   # 统一编辑器配置
├── .env                            # 启动项目自定义端口配置文件
├── .eslintrc.js                    # ES( js / jsx ) 语法纠错
├── .eslintignore                   # 纠错忽略 配置
├── .gitignore                      # git忽略 配置
├── LICENSE                         # GPL3.0
├── package-lock.json               # NPM 依赖包 版本锁
├── package.json                    # 项目 配置
├── README.md                       # 项目 说明
├── .postcssrc.js                   # Postcss 配置
├── tsconfig.json                   # TypeScript 配置(已配置好 - 未使用)
├── tslint.json                     # TSlint(TS) 语法纠错(已配置好 - 未使用)
└── yarn.lock                       # Yarn 依赖包版本锁


ToDoList

  • webpack report打包的体积分析报告( 类似 Vue的 npm run build --report )
  • src 目录 功能划分的调整( 参考Redux 推荐目录结构 )
  • webpack 巧解环境配置问题
  • redux-devtools 配置说明
  • 优化项目结构果
  • store 独立出来, 作为一个模块
  • redux 中使用 异步thunk