前端目录

项目目录结构规范
|-- 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、组件实现模板;
本地化登录逻辑的整合并统一化;

Leave a Reply

Your email address will not be published. Required fields are marked *