- 一个基于 react + antd + typescript + rematch 的单页应用模板
- 命令
- 安装依赖:
npm i
- 本地开发:
npm run dev
- 打包发布:
npm run build
- 运行测试:
npm run test
- 查看打包后的文件体积:
npm run analyse
- 检查代码及修复:
npm run lint
npm run lint:fix
- 安装依赖:
- 开发流程
- 1.创建项目仓库 -> 确定
pages
,models
,services
各个目录的结构 -> 技术设计 review -> 开始开发 - 2.配置 mock 规则为 services 层提供数据,开始开发页面部分,此时可不依赖接口
- 3.与后端确定接口,使用 mock,修改 services 层适配数据
- 4.与后端真实接口进行联调,修改 services 层适配数据
- 5.还原 UI 设计图
- 6.自测,提测,交付
- 1.创建项目仓库 -> 确定
- 配置文件
- 开发一个新功能
- 编辑器设置
- commit 规范
- git commit 提交规范
<type>(<scope>): <subject>
- type:
feat
,fix
,docs
,style
,format
,refactor
,deps
,chore
,perf
,test
,revert
- 示例:
feat: 新增xx功能
react-antd-ts-rematch-template
├── webpack // webpack 配置文件
│ ├── env.js // 环境配置
│ ├── webpack.base.config.js
│ ├── webpack.dev.config.js
│ └── webpack.prod.config.js
├── scripts // 部署及其他脚本
│ ├── build.sh
│ └── deploy.sh
├── docs // 文档
├── src // 业务代码
│ ├── assets // 静态资源
│ │ └── images // 图片
│ ├── components // 公共组件
│ │ ├── Bread // 面包屑导航
│ │ ├── HeaderBar // 顶栏
│ │ └── SideMenu // 侧边栏导航
│ ├── config // 配置目录
│ │ ├── constants.ts // 常量定义
│ │ └── errors.ts // 错误码配置
│ ├── mock // mock配置
│ │ └── index.ts
│ ├── models // 数据模型
│ │ └── index.ts
│ ├── pages // 业务模块
│ │ ├── Main
│ │ └── Account
│ ├── navigator // 导航
│ │ └── index.ts // 导航配置
│ ├── routers // 路由
│ │ └── config.ts // 路由配置
│ ├── schemas // 业务类型定义
│ ├── services // 数据服务层
│ │ ├── request.ts // 网络请求封装
│ │ └── index.ts
│ ├── styles
│ │ ├── global.less // 全局样式
│ │ └── variables.less // 样式变量
│ ├── types // 申明文件
│ ├── utils // 工具
│ │ └── helpers.ts // 工具函数
│ ├── App.tsx
│ ├── store.ts
│ ├── index.html
│ └── index.tsx
├── README.md
├── package-lock.json
└── package.json