项目目录结构规范
|-- Dockerfile
|-- nginx_app.conf
|-- start.sh
|-- ***
|-- src
| |---- env.ts // 运行时的环境判断脚本
| |---- assets // 资源文件目录
| |---- components // 通用组件目录
| |---- constants // 全局常量目录
| |---- hooks // 通用hooks,可参照ahooks
| |---- layouts // 布局组件目录
| |---- less // 通用样式目录
| |---- locales // 语言包目录
| |---- models // 公共数据处理目录
| |---- pages // 页面目录
| |---- services //公共接口请求目录
| |---- utils // 工具类
| | |----- request.ts // 用于处理通用请求方法的文件
| |---- app.ts
| |---- global.less
页面代码目录结构规范
|-- pages
| |--- login
| | |---- index.tsx
| | |---- index.less
| | |---- models // 非必须
| | |---- services // 模块独立API
| | |---- components // 非必须
组件代码目录结构规范
|-- components
| |--- AComponents // 大驼峰
| | |---- index.tsx
| | |---- index.less/style.less
| | |---- components // 组件下可能也会出现独立的小单元
数据处理规范
|-- src
| |---- models // 公共数据处理目录
| | |----- global.ts // 处理一些通用性数据,如后端枚举等等
| | |----- users.ts // 用于处理用户数据
...
model内容包含store、reducer、effect等
组件命名规范(当前项目统一)
组件文件夹: 1. 大驼峰写法,FlatList(推荐为统一写法);2. 分割线写法,flat-list;
组件命名:1. 大驼峰写法,FlatListItem
通用样式、通用工具类
|-- less
| |--- variable.less // 主题色、主题样式数据定义
| |--- antdCover.less | antd_cover.less // antd的样式覆盖
| |--- common.less // 通用样式
|-- utils
| |--- request.ts // 发送请求的集合及错误统一处理
| |--- utils.ts // 通用方法的集合
| |--- date.ts // 日期时间的处理
...
两种组件的实现规范
class组件:
@。。。// 修饰器
export default class extends React.Component
生命周期
render
functional组件:推荐使用
使用react提供的hooks对方法进行包装
使用aHooks提供的hooks方法作为通用方法
应用发布配置
两种方式:1. 通过本地nginx文件进行配置; 2. 通过ship进行环境配置映射到nginx配置
文件依赖: Dockerfile、 nginx_app.conf、 start.sh
TODO:相关文件规范,待补充;
List:
utils、nginx、dockerfile、start.sh、组件实现模板;
本地化登录逻辑的整合并统一化;