- 安装react-with-better-scroll,替换默认的frame-view组件或者新增一个组件,不需要全部使用frame-view
react-h5-tmp 是基于 create-react-app(v5) 创建并使用 Ant Design Mobile + JavaScript + craco + Redux + sass + Rem 布局适配 + axios(封装)+ Eslint + Prettier 等流行技术栈构建移动端模板脚手架,开箱即用。
craco 是什么? craco(一个对 create-react-app 进行自定义配置的社区解决方案) 对 create-react-app 的默认配置进行自定义设置。
- node 14+
- Visual Studio 69+
- Vetur v0.35.0
- Eslint v2.2.6
- Prettier - Code formatter v9.5.0
#通过 npm 安装 pnpm (如果本地已安装pnpm,请忽略)
npm install -g pnpm
#安装项目依赖
pnpm install
#开发环境启动
pnpm start
#打包 test 环境代码
pnpm build:test
#打包生产环境代码
pnpm build or pnpm build:prod
#执行 js 类型检查
pnpm lint:fix
#执行 prettier 批量格式化代码
pnpm lint:prettier
##注:详细请阅读package.json 以及对应的环境配置文件(即.env 文件)!
同时在项目根目录下包含一个 run.bat,该文件会列出所有 package.json 中 script 块里面的所有命令,
通过双击该文件,你可以在命令行中输入相应的序号并按 Enter 键,程序将运行你选择的脚本。
如果设计稿的尺寸不是 750,而是 375 或其他大小,请在 .postcssrc.js 中及时调整 rootValue。
- 🚀 重要、复杂逻辑一定要写注释;
- 🚀 代码规范按照 eslint 的规则来,做到 no waring 和 no error;
- 🚀 预编译使用 sass;
- 🚀 操作成功或失败后要有提示,比如新增成功、新增失败运行时间长的任务(计算量大、请求后台接口),要有 loadding 效果;
- 🚀 公共的状态才放到 store;
- 🚀 代码尽量往纵向发展,一行不要太长;
- 🚀 不要在钩子函数中写大量业务代码;
- 🚀 异步使用 aysnc await 语法;
- 🚀 不是常用的方法不要全局挂载;
- 🚀 文件命名如果是多单词则采用驼峰命名或者烤肉串大小写,尽量简洁明了;
基础组件文件命名应该以 base 为前缀命名,以示其唯一性,并且以横线连接。
例子:
src
└─ resources
└─ components
└─ base-list
├─ index.js //源码
├─ index.scss //样式
└─ README.md //组件使用说明文档
业务组件文件命名应该以 the 为前缀命名,以示其唯一性,并且以横线连接。
例子:
src
└─ views
└─ components
└─ the-loading
├─ index.js //源码
├─ index.scss //样式
└─ README.md //组件使用说明文档
为了方便维护与开发,建议路由文件命名与对应的页面文件命名保持一致,尽量简洁明了。
例子:
src
└─ config
└─ router
|- index.js
|- dev.js
|- home.js
为了方便维护与开发,建议接口文件命名与对应的页面文件命名保持一致,尽量简洁明了。
例子:
src
└─ config
└─ apis
|- index.js
|- home.js
为了方便维护与开发,建议以当前对应模块或者功能命名文件夹,尽量简洁明了。
例子:
src
└─ config
└─ store
└─ dev
|- index.js
└─ home
|- index.js
建议图片文件夹命名与对应的页面文件命名保持一致,公共图片资源放置到 src/assets/img/base 目录下即可。
例子:
src
└─ assets
└─ img
|- index
|- dev
|- base
一般项目分主分支(master)和其他分支。 当有团队成员要开发新功能(Feather)或改 BUG(Fix) 时,就从 master 分支开一个新的分支。
- feat 新增功能
- fix 修复 bug
- docs 文档变更
- style 代码格式(不影响功能,例如空格、分号等格式修正)
- refactor 代码重构
- perf 改善性能
- test 测试
- build 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等)
- ci 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等
- chore 变更构建流程或辅助工具
- revert 代码回退
版本号以 v 开头,根据当前仓库的 tag 编号进行累加,如:v1.10.45。
react-h5-tmp
├─ .env.development // 开发环境配置文件
├─ .env.production // 生产环境配置文件
├─ .env.test // 测试环境配置文件
├─ .eslintignore //
├─ .eslintrc.js // ESlint配置文件
├─ .npmrc //
├─ .prettierrc.js // prettier配置文件
├─ .vscode //
│ └─ settings.json //
├─ babel.config.js //
├─ craco.config.js // 构建脚本(webpack配置)
├─ jsconfig.json //
├─ package.json //
├─ pnpm-lock.yaml //
├─ postcss.config.js //
├─ public //
│ ├─ index.html // template模板
│ └─ static // 静态资源
│ └─ favicon.ico //
├─ README.md // 项目使用说明文档
├─ run.bat // 批处理文件脚本
└─ src // 业务模块
├─ assets // 静态资源 hash处理
│ ├─ css //
│ │ ├─ index.scss //
│ │ └─ utils //
│ │ └─ @util.scss //
│ ├─ img //
│ │ └─ base //
│ │ ├─ empty.png //
│ │ └─ loading@2x.gif //
│ └─ js //
├─ config // 业务配置目录
│ ├─ apis // 所有接口相关
│ │ ├─ index.js //
│ │ └─ list.js //
│ ├─ router // 所有路由相关
│ │ ├─ dev.js //
│ │ ├─ error.js //
│ │ └─ index.js //
│ └─ store // 状态商店(所有全局状态管理相关)
│ └─ dev //
│ └─ index.js //
├─ index.js // 入口js文件
├─ layout // 基础布局组件
│ ├─ frame-view //
│ │ ├─ index.js //
│ │ └─ index.scss //
│ ├─ README.md //
│ └─ tabbar //
│ └─ index.js //
├─ packages // 项目配套的第三方包配置
│ ├─ console // vConsole
│ │ └─ index.js //
│ ├─ request // axios
│ │ ├─ cancel //
│ │ │ ├─ index.js //
│ │ │ └─ utils //
│ │ │ └─ generateReqKey.js //
│ │ ├─ httpErrorStatusHandle //
│ │ │ └─ index.js //
│ │ ├─ index.js //
│ │ ├─ loading //
│ │ │ ├─ components //
│ │ │ │ ├─ loading.js //
│ │ │ │ └─ loading.scss //
│ │ │ └─ index.js //
│ │ ├─ README.md //
│ │ └─ retry //
│ │ └─ index.js //
│ ├─ router // react-router-dom
│ │ └─ index.js //
│ └─ store // Redux 核心封装(集中导出)
│ ├─ index.js //
│ └─ modules.js //
├─ reportWebVitals.js //
├─ resources // 全局基础资源如基础组件、全局插件等
│ ├─ components //
│ │ └─ base-list //
│ │ ├─ index.js //
│ │ ├─ index.scss //
│ │ └─ README.md //
│ └─ plugin //
├─ utils // 工具库
│ ├─ helper // 帮助类如一些类型校验函数、判断浏览器 终端等
│ │ ├─ env.js //
│ │ ├─ sleep.js //
│ │ └─ validate.js //
│ └─ tools // 其他工具类
│ ├─ eventBus //
│ │ └─ index.js //
│ └─ get-realpx //
│ └─ index.js //
└─ views // 视图层
├─ app //
│ └─ App.js //
├─ components //
│ └─ the-loading //
│ ├─ index.js //
│ └─ index.scss //
├─ dev //
│ ├─ components //
│ │ ├─ eventBus //
│ │ │ ├─ components //
│ │ │ │ ├─ children.js //
│ │ │ │ └─ find.js //
│ │ │ └─ index.js //
│ │ ├─ layOut //
│ │ │ └─ index.js //
│ │ ├─ redux //
│ │ │ ├─ index.js //
│ │ │ └─ index.scss //
│ │ ├─ tabbar //
│ │ │ └─ index.js //
│ │ └─ tool //
│ │ ├─ components //
│ │ │ └─ lodashjs.js //
│ │ ├─ index.js //
│ │ └─ index.scss //
│ ├─ index.js //
│ └─ index.scss //
├─ err404 //
│ ├─ index.js //
│ └─ index.scss //
└─ index //
├─ index.js //
└─ index.scss //