Skip to main content

制定项目规范

用途​

这份是可复用的项目规范模板，新项目直接照搬，按需修改。

详细配置请参考 新建一个 react 单页面项目，编码工具参考 统一编码规范。

技术栈​

  • TypeScript
  • React / Vue + Hooks
  • Less / Sass
  • webpack / Vite

公用库​

公用库是团队沉淀的、推荐优先使用的库，避免引入同类竞品导致维护成本上升。

  • ant-design / element-plus - UI 组件库
  • ahooks - 工具 hooks
  • lodash-es - 工具函数（按需引入）
  • axios - 请求库

命名规范​

类型规则例子
变量 / 函数小驼峰userId
常量大写下划线USER_ID
文件夹 / 文件中划线user-id.ts
Class大驼峰UserService
组件大驼峰UserCard
ts interfaceI + 大驼峰IUserProps
ts enumE + 大驼峰EDirection
ts typeT + 大驼峰TResponse

项目结构​

src
├─ assets              # 静态资源（图片、字体、全局样式）
├─ components          # 公共组件
├─ pages / containers  # 页面级组件
├─ hooks               # 自定义 hooks
├─ utils               # 工具函数
├─ services / api      # 接口请求
├─ store               # 状态管理
├─ router              # 路由配置
├─ types               # 全局类型
├─ config              # 环境配置
├─ styles              # 全局样式、变量
├─ App.tsx
└─ main.tsx

环境配置​

环境用途触发
DEV本地开发pnpm dev
UAT测试联调merge to develop
STAGING预发merge to release/*
PROD线上git tag

实现上用 cross-env + 环境变量，或用 .env.[mode] 文件（Vite）。

路由约定​

  • 全部使用懒加载
  • meta 字段统一：title / icon / roles / keepAlive / hideInMenu
  • 根路由 / 走 Layout，子路由嵌套

数据管理​

  • 全局共享数据（用户、全局配置）→ store
  • 页面级数据 → useState / useReducer
  • 服务端数据 → useRequest（ahooks）/ react-query

接口调用​

三层结构（详细实现参考 请求函数封装）：

axios.create 基础请求  →  api 业务封装  →  useRequest 业务消费

提交规范​

参考 统一编码规范 + GitWorkflow。

备注​