脚手架模型来自 react-admin
NPM 版本请 升级到
5.0.3
以上Nodejs 版本 尽量使用
7.9.0
版本以上
- React v15.5.0更新说明 & v16.0.0更新预告
- 使用
TypeScript
超集语言辅助 - 使用
TSLint
进行代码检测 - 使用
Jest
与Enzyme
进行代码测试 - 使用
Redux
进行状态管理
技术名称 | 作用 | 版本 |
---|---|---|
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 |
├── 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 / # 开发目录
│ ├── axios / | # API 交互统一方法
│ | └── index.js | | # axios 封装配置
│ ├── components / | # React 组件文件夹( 即将删除!!! - 请及时处理 )
│ ├── stores / | # Redux 全局状态管理
│ ├── style / | # Less 样式配置
│ ├── utils / | # 工具文件存放目录
│ ├── views / | # ( 页面 + 组件 ) 统一管理
│ | |── common / | | # 通用
| │ | |── components / | | | # 通用 组件
| │ | └── pages / | | | # 通用 页面
| | │ | |── HomeRouter.jsx | | | | # 主页 路由模版页( 开发中 )
| | │ | |── Login.jsx | | | | # 登录 页( 开发中 )
| | │ | └── 404.jsx | | | | # 404 页( 开发中 )
│ | |── UpKeep / | | # '维修' 版块
| │ | |── components / | | | # '维修' 组件
| │ | └── pages / | | | # '维修' 页面
| | │ | └── Table2.jsx | | | | # '维修' 测试 Redux( 测试中 )
│ | └── Warehouse / | | # '仓库管理' 版块
| │ | |── components / | | | # '仓库管理' 组件( 开发中 )
| │ | └── pages / | | | # '仓库管理' 页面( 开发中 )
│ └── 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 依赖包版本锁
-
standard
语法配置( 或使用TSlint
) -
TS
配置引入 -
webpack
优化配置- 需要升级 2.x !!! -
hotcss
响应式 文字处理方案 -
webpack
report打包的体积分析报告( 类似 Vue的npm run build --report
) -
src
目录 功能划分的调整( 参考Redux
推荐目录结构 ) -
Postcss
配置 -
Antd
的主题 Less 配置已完成; 如果需要配置主题 需要修改src/theme
文件夹( 线上环境的主题 / 按需加载 条件未配置; 如有需要 配置webpack.config.prod.js
) - webpack 巧解环境配置问题