mobx_antd_react

中后台 SPA 完整项目脚手架。

写在前面

这是一个不断迭代，与时俱进的中后台项目.项目规范总结在/document 目录下.

如果对你的项目搭建有帮助的话，随手给个星，感谢。

特点

• webpack 一个适用于真实项目开发配置
• Router 做了基本权限处理，跳转，以及一个更好的组织项目模块的路由配置函数
• mobx 处理数据流，简单易用
• axios 基于模块组织 api 接口
• 基于 antd 提供了表单，表格，上传的高阶组件。统一了以上场景的公共业务
• 基于路由和组件的按需加载模块
• style 和 js 使用 lint 限制, git hooks 强制统一资源代码风格
• 业务场景模块抽离

规范列表

• eslint 继承 airbnb，自定义部分 rules
• stylelint 限制样式文件，对 .js 文件中样式使用 rules 进行忽略
• 文件引用顺序，1 公共库 2 公共业务（util 函数，通用组件，hoc）3 业务组件 4 配置文件 5 样式 6 const 结构

文件目录

├── node_modules:                   模块文件夹
|   └── ...
├── _mocker_:                       mock接口数据
├── bundle:                         webpack配置文件
|   ├── util:                       工具函数
|   ├── environment:                环境变量配置
|   ├── getDllPlugins:              获取dll包
|   ├── index:                      调用webpack入口文件
|   ├── webpack.com.config:         webpack通用配置
|   ├── webpack.dev.config:         webpack开发配置
|   ├── webpack.dll.config:         webpack公共依赖库打包
|   └── webpack.prod.config:        webpack生产配置
├── dist:                           打包生成目录
├── dll:                            dll包文件
├── src:                            开发目录
|   ├── api:                        API配置，axios封装
|   ├── components:                 公共组件
|   ├── hoc:                        公共业务
|   ├── layouts:                    布局组件
|   ├── routes:                     项目路由
|   |   ├── ErrorPage:              错误导航页面
|   |   ├── Home:                   主路由模块
|   |   ├── Login:                  登录页面
|   |   └── index.js:               路由配置文件
|   ├── settings:                   配置文件
|   |   ├── const.js:               常量文件
|   |   ├── headConfig.js:          顶部模块配置
|   |   ├── permissions.js:         权限配置
|   |   └── sideMenu.js:            目录
|   ├── store:                      mobx store文件
|   ├── utils:                      工具函数
|   ├── index.ejs:                  模版文件
|   ├── index.js:                   入口文件
|   └── style.scss:                 公共样式
├── static                          静态文件
├── .babelrc                        babel配置文件
├── .editorconfig                   不通操作系统编码格式统一
├── .eslintignore                   eslint忽略
├── .eslintrc.json                  eslint
├── .gitignore                      git忽略文件
├── .prettierignore                 格式化代码忽略文件
├── .prettierrc                     格式化自定义配置文件
├── .stylelintrc.json               style lint 配置文件
├── .gitignore                      git忽略文件
├── jsconfig.json                   代码兼容装饰器写法
├── package.json                    项目依赖 npm
├── postcss.config.js               postcss 插件配置
└── README.MD                       项目信息

技术栈

• react 16.3xx
• react-dom
• react-router 4.xx
• react-loadable
• mobx 数据流
• webpack 4.xx
• ESLint styleLint lint-staged pre-commit 代码规范
• axios 异步请求
• antd ui
• mock 模拟接口数据
• echarts

开发环境

• git clone https://github.com/Tianlikai/mobxSpa.git
• npm i
• npm run dev

生产环境

• npm run build

更新 dll 包

当你所定制的 dll 包有升级或需要新增时，请重新打包

• npm run build:dll

TODO

• loading 改为体验更好的占位符
• 当项目体积变大，是否针对暂存区进行 lint 检查
• 引入 git 提交格式规范
• React ref/context/lazy/suspense/error api 使用

未来展望

• 异步渲染

紧急 TODO

• ant design 升级到 4 表单暂时不可用
• 打包优化