企业级项目规范搭建
项目目录规范
pages 页面
components 组件
routes 路由 react-router-dom
hooks hooks工具库
utils 函数工具库
api 网络请求
layout 布局
types 类型定义(TS)
store 数据流
....
页面搭建
- 登录
- 管理后台 (动态权限控制)
- 404(报错
登录页面
其实登录没啥大数据量,复杂度来自后端
- 用户名密码
- 第三方登录(扫码,github...)
- 验证码(图片,短信,语音)
- 前端主要在于表单验证,和后端交互 & 一点点体验
- ant-design的form表单使用
- 输入验证
- 登录请求
- 登录的token管理(jwt)
- 路由跳转
- 路由守卫,非登录态跳转到登录页
网络请求代理
vite的proxy配置
请求方式
- fetch
所有api前缀代理到server端, /user/hi
=> http://localhost:7001/api/user/hi
=> http://shengxinjing.cn:7001/user/hi
javascript
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)
- 判断返回值的code,是0的话,返回data (也可以交给业务处理)
- 不是0的话,用antd显示报错信息
- 请求需要获取环境变量,.env下面 VITE_开头
- 登录后的token
- api的key
- 登录账号
- /user/login
316783812@qq.com
316783812
token和用户信息怎么存
localStorage和Context
- Context是最简单的数据数据管理方案
- Provider包裹+useContext获取
路由守卫
- AuthRouter设计
- 路由配置自动化 (glob import)
- 路由懒加载Suspense实现
- 路由匹配函数
页面布局Layout
- antd layout组件(后续会实现)
- antd 栅格系统
css解决方案
- css
- 行内样式
- less sass stylus预处理
- css in js
- tailwindcss原子化css
各种规范lint
- 代码规范eslint (prettier)
- stylelint (自行体验)
- git hooks
husky
- lint-staged只处理缓存区的代码
- git commit信息格式 自己写脚本 or commitlint
- commitizen (自行体验)
eslint
sh
pnpm add -D eslint @antfu/eslint-config
.eslintrc
json
{
"extends": [
"@antfu/eslint-config"
]
}
package.json
json
"lint": "eslint src --fix --cache"
prettier和eslint
@task: 定制自己团队风格的eslint配置 @shengxj/eslint-config
自己定义rules,0表示关闭,1表示warn,2表示error级
Git 校验
使用Husky在代码提交的时候,执行校验
sh
pnpm i husky -D
husky install
npx husky add .husky/pre-commit "npm run lint"
json
"scripts": {
// install自动执行
"prepare": "husky install"
}
lint-staged 防止每次都全量
json
"lint-staged": {
"**/*.{js,jsx,tsx,ts}": [
"npm run lint"
]
}
git commit信息格式
方便自动生成changelog和团队协作
sh
<type>: <subject>
type可以是下面的值
- feat: 新功能。
- fix: Bug修复
- docs: 文档修改
- perf: 性能优化
- refactor: 代码重构
- test: 测试代码
- chore: 不知道是啥就写chore
commitlint
其实自己写也不费劲,参考 https://github.com/vuejs/core/tree/main/scripts
sh
pnpm install -D commitlint @commitlint/config-conventional @commitlint/cli
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
.commitlintrc
json
{
"extends": ["@commitlint/config-conventional"]
}
- 目录规范搭建
- 好用的脚本工具
- 工程化系统搭建(插件和工具)