前端通用模块服务

项目介绍

• 基于React + Typescript + Vite + Zustand + Axios + Eslint + Prettier + Stylelint的前端通用模块服务
• 包含接口请求、全局状态管理、全局工具函数、全局样式、全局组件、全局指令等

环境配置

• 端口 9999
• node version v18.16.0
• 镜像源 https://registry.npmjs.org/
• 代理

技术栈

• 构建工具 vite
• 编码语言 React + Typescript
• 状态管理 zustand
• 接口请求 axios
• 校验美化 eslint + prettier + stylelint

目录说明

src 源码目录
|-- api 所有api接口
|-- assets 静态资源，images, icons, styles等
|-- components 公用组件
|-- config 配置信息
|-- constants 常量信息，项目所有Enum, 全局常量等 |-- directives 自定义指令
|-- filters 过滤器，全局工具
|-- hooks 自定义钩子
|-- mock 模拟接口，临时存放
|-- plugins 插件，全局使用
|-- store 状态， 统一管理
|-- modules 通用组件服务库
|-- views 视图目录

编码规范

1. 命名规范

• 目录命名：pascal-case格式，有复数结构时，要采用复数命名法，缩写不用复数。
• css类名：pascal-case格式。注释独占一行。避免行末注释。嵌套选择器的深度不要超过3层。
• less/scss：snake_case下划线格式。
• 变量命名：lowerCamelCase，代码中的命名均不能以下划线或美元符号结束。
• 常量命名：全部大写，单词间用下划线隔开，力求语义表达完整清楚， 不要嫌名字长。
• 特殊说明：代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。即使纯拼音命名方式也要避免采用。 说明：正确的 英文拼写和语法可以让阅读者易于理解，避免歧义。

2. Airbnb Javascript 编码规范

BranchFlow

分支名称|分支说明|分支类型|命名规则 ---|---|---|--- Production | 生产分支，即 Master分支。只能从其他分支合并，不能直接修改 |主要分支 | Release | 发布分支，即Test分支。基于Develop分支创建，待发布完成后合并到 Develop 和 Production 分支去 |辅助分支 |Release/1.2（后面是版本号） Develop | 主开发分支，包含所有要发布到下一个 Release 的代码，该分支主要合并其他分支内容 |主要分支 | Feature | 新功能分支，基于 Develop 分支创建，开发新功能，待开发完毕合并至 Develop 分支 |辅助分支 |Feature/xxx Hotfix | 修复分支，基于 Production 分支创建，待修复完成后合并到 Develop 和 Production 分支去，同时在 Master 上打一个tag |辅助分支 |Hotfix/1.2.1（后面是版本号）