企业级项目规范搭建 #

项目目录规范 #

pages            页面
components       组件
routes           路由  react-router-dom
hooks            hooks工具库
utils            函数工具库
api              网络请求
layout           布局
types            类型定义（TS）
store            数据流
....

页面搭建 #

1. 登录
2. 管理后台 （动态权限控制）
3. 404（报错

登录页面 #

其实登录没啥大数据量，复杂度来自后端

1. 用户名密码
2. 第三方登录（扫码,github...）
3. 验证码（图片，短信，语音）
4. 前端主要在于表单验证，和后端交互 & 一点点体验

1. ant-design的form表单使用
2. 输入验证
3. 登录请求
4. 登录的token管理（jwt)
5. 路由跳转
6. 路由守卫，非登录态跳转到登录页

网络请求代理 #

vite的proxy配置

请求方式 #

1. fetch

所有api前缀代理到server端, /user/hi => http://localhost:7001/api/user/hi => http://shengxinjing.cn:7001/user/hi

fetch('/api/user/hi',{
  // headers:{
  //   apikey:'dasheng123'
  // }
}).then(res=>res.json()).then(res=>{
  console.log(res)
})

api校验 & axios #

后端设置了api校验，隔一段时间会换一次，过期会报错，大家pull最新代码即可，维护正版的权益 axios的interceptors

VITE_API_KEY=dasheng123
VITE_URL=[http://shengxinjing.cn:7001](http://shengxinjing.cn:7001)

1. 判断返回值的code，是0的话，返回data （也可以交给业务处理）
2. 不是0的话，用antd显示报错信息
3. 请求需要获取环境变量，.env下面 VITE_开头
   1. 登录后的token
   2. api的key
4. 登录账号
   1. /user/login

316783812@qq.com
316783812

token和用户信息怎么存 #

localStorage和Context

1. Context是最简单的数据数据管理方案
2. Provider包裹+useContext获取

路由守卫 #

1. AuthRouter设计
2. 路由配置自动化 （glob import）
3. 路由懒加载Suspense实现
4. 路由匹配函数

页面布局Layout #

1. antd layout组件（后续会实现）
2. antd 栅格系统

css解决方案 #

1. css
2. 行内样式
3. less sass stylus预处理
4. css in js
5. tailwindcss原子化css

各种规范lint #

1. 代码规范eslint （prettier）
2. stylelint (自行体验)
3. git hooks husky
4. lint-staged只处理缓存区的代码
5. git commit信息格式 自己写脚本 or commitlint
6. commitizen (自行体验)

eslint #

pnpm add -D eslint @antfu/eslint-config

.eslintrc

{
  "extends": [
    "@antfu/eslint-config"
  ]
}

package.json

  "lint": "eslint src --fix --cache"

prettier和eslint #

@task: 定制自己团队风格的eslint配置 @shengxj/eslint-config

自己定义rules,0表示关闭，1表示warn，2表示error级

Git 校验 #

使用Husky在代码提交的时候，执行校验

pnpm i husky -D
husky install
npx husky add .husky/pre-commit "npm run lint"

"scripts": {
    // install自动执行
    "prepare": "husky install"
}

lint-staged 防止每次都全量 #

"lint-staged": {
    "**/*.{js,jsx,tsx,ts}": [
      "npm run lint"
  ]
}

git commit信息格式 #

方便自动生成changelog和团队协作

<type>: <subject>

type可以是下面的值

1. feat: 新功能。
2. fix: Bug修复
3. docs: 文档修改
4. perf: 性能优化
5. refactor: 代码重构
6. test: 测试代码
7. chore: 不知道是啥就写chore

commitlint #

https://commitlint.js.org/#/

其实自己写也不费劲，参考 https://github.com/vuejs/core/tree/main/scripts

pnpm install -D commitlint @commitlint/config-conventional @commitlint/cli

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

.commitlintrc

{
  "extends": ["@commitlint/config-conventional"]
}

1. 目录规范搭建
2. 好用的脚本工具
3. 工程化系统搭建(插件和工具)