长江中心 - 物业管理系统 - V2.0版本
脚手架模型来自 react-admin
NPM 版本请 升级到
5.0.3以上Nodejs 版本 尽量使用
7.9.0版本(可能在 node v8 版本有错误; 不推荐使用 v8以上)开发环境, 请务必使用 chrome 作为调试浏览器; 并且安装 react-devtools 与 redux-devtools 调试插件;
- React v15.5.0更新说明 & v16.0.0更新预告
- 使用 ESlint 进行代码检测
- 使用 Redux 进行状态管理
使用技术:
| 全家桶 | 作用 | 版本 |
|---|---|---|
| react | 视图库 | 15.6.1 |
| redux | 状态管理 | 3.7.1 |
| react-redux | Redux的 React 绑定库 | 5.0.5 |
| react-router | 路由管理 | 4.1.1 |
| react-router-redux | 路由状态 | 5.0.0-alpha.6 |
| react-router-config | 静态路由配置 | 1.0.0-beta.3 |
| 开发依赖 | 作用 | 版本 |
|---|---|---|
| ant-design | UI框架 | 2.10.4 |
| axios | 交互处理 | 0.16.1 |
| less | 样式预处理器(AntD) | 2.7.2 |
| history | 路由历史 | 4.6.3 |
| webpack | 模块打包 | 1.14.0 |
| babel | ES6转译ES5 | 6.24.1 |
| mockjs | 模拟接口 | 1.0.1-beta3 |
| Elf-ES | ES版本Elf(管理样式) | 2.2.1 |
| lodash | 实用工具库 | 4.17.4 |
| styled-components | CSS in JS实现方法 | 2.0.0 |
| polished | JS风格的轻量样式工具集 | 1.1.3 |
| store.js | 操作local storage | 2.0.12 |
使用插件:
| 插件名称 | 作用 | 版本 |
|---|---|---|
| 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 |
| animate.css | CSS3 动画功能 | 3.5.2 |
| qs | 字符串解析库(配合axios) | 6.4.0 |
| moment | JS处理 / 操作 / 转换 时间日期 | 2.18.1 |
| hotcss | 移动端布局终极解决方案 | 2.2.1 |
目录结构
├── 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 依赖包版本锁说明: dev开发模式 / 打包输出 的操作方法
ToDoList
- 关于: 首次运行
yarn start开发模式, 只进入首页 无法登录的问题解决方案;(因 目前登录服务是在局域网内进行, 所以需要手动配置一下 localStore本地数据), 会尽快完善 这个测试功能; - 在
redux中使用 异步thunk - 在
redux中使用 redux-saga; 中文文档