{"id":19248674,"url":"https://github.com/zhoukaiyue/react-h5-tmp","last_synced_at":"2025-04-21T11:34:37.813Z","repository":{"id":53700520,"uuid":"519119170","full_name":"zhoukaiyue/react-h5-tmp","owner":"zhoukaiyue","description":"react-h5-tmp 是基于 create-react-app(v5) 创建并使用 Ant Design Mobile + JavaScript + craco + Redux + sass + Rem 布局适配 + axios（封装）+ Eslint + Prettier 等流行技术栈构建移动端模板脚手架，开箱即用。","archived":false,"fork":false,"pushed_at":"2024-03-26T06:11:27.000Z","size":762,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-03-27T04:53:43.251Z","etag":null,"topics":["antd-mobile","h5","react-routerv6","react18","template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhoukaiyue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-07-29T07:19:17.000Z","updated_at":"2024-03-27T04:53:43.252Z","dependencies_parsed_at":"2024-01-24T08:29:24.047Z","dependency_job_id":null,"html_url":"https://github.com/zhoukaiyue/react-h5-tmp","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukaiyue%2Freact-h5-tmp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukaiyue%2Freact-h5-tmp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukaiyue%2Freact-h5-tmp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukaiyue%2Freact-h5-tmp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhoukaiyue","download_url":"https://codeload.github.com/zhoukaiyue/react-h5-tmp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223863915,"owners_count":17216234,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd-mobile","h5","react-routerv6","react18","template"],"created_at":"2024-11-09T18:09:45.195Z","updated_at":"2024-11-09T18:09:46.107Z","avatar_url":"https://github.com/zhoukaiyue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n * @Descripttion: 项目描述文件\n * @version:\n * @Author: zhoukai\n * @Date: 2022-07-28 09:54:02\n * @LastEditors: zhoukai\n * @LastEditTime: 2024-01-24 15:13:03\n--\u003e\n\n# 简介\n\nreact-h5-tmp 是基于 create-react-app(v5) 创建并使用 Ant Design Mobile + JavaScript + craco + Redux + sass + CSS Moudles + Rem 布局适配 + axios（封装）+ Eslint + Prettier 等流行技术栈构建移动端模板脚手架，开箱即用。\n\ncraco 是什么？\ncraco（一个对 create-react-app 进行自定义配置的社区解决方案） 对 create-react-app 的默认配置进行自定义设置。\n\n## 环境要求\n\n-   node 14+\n\n## 编辑器以及对应扩展\n\n-   Visual Studio 69+\n-   Eslint v2.2.6+\n-   Prettier - Code formatter v9.5.0+\n\n## 快速开发\n\n```\n#通过 npm 安装 pnpm (如果本地已安装pnpm,请忽略)\nnpm install -g pnpm\n#安装项目依赖\npnpm install\n#开发环境启动\npnpm start\n#打包 test 环境代码\npnpm build:test\n#打包生产环境代码\npnpm build or pnpm build:prod\n#执行 js 类型检查\npnpm lint:fix\n#执行 prettier 批量格式化代码\npnpm lint:prettier\n\n##注：详细请阅读package.json 以及对应的环境配置文件（即.env 文件）！\n```\n\n```text\n同时在项目根目录下包含一个 run.bat，该文件会列出所有 package.json 中 script 块里面的所有命令，\n通过双击该文件，你可以在命令行中输入相应的序号并按 Enter 键，程序将运行你选择的脚本。\n```\n\n## 开发基础规范\n\n\u003cfont  color=\"red\"\u003e如果设计稿的尺寸不是 750，而是 375 或其他大小，请在 .postcssrc.js 中及时调整 rootValue。\u003c/font\u003e\n\n-   🚀 重要、复杂逻辑一定要写注释；\n-   🚀 代码规范按照 eslint 的规则来，做到 no waring 和 no error；\n-   🚀 预编译使用 sass；\n-   🚀 操作成功或失败后要有提示，比如新增成功、新增失败运行时间长的任务（计算量大、请求后台接口），要有 loadding 效果；\n-   🚀 公共的状态才放到 store；\n-   🚀 代码尽量往纵向发展，一行不要太长；\n-   🚀 不要在钩子函数中写大量业务代码；\n-   🚀 异步使用 aysnc await 语法；\n-   🚀 不是常用的方法不要全局挂载；\n-   🚀 文件命名如果是多单词则采用驼峰命名或者烤肉串大小写，尽量简洁明了；\n\n### 基础组件名。 【注：src/resources/components 目录。】\n\n\u003e 基础组件文件命名应该以 base 为前缀命名，以示其唯一性，并且以横线连接。\n\n```\n例子：\nsrc\n└─ resources\n   └─ components\n      └─ base-list\n         ├─ index.js      //源码\n         ├─ index.scss    //样式\n         └─ README.md     //组件使用说明文档\n```\n\n### 业务组件名。 【注：src/views/components 目录。】\n\n\u003e 业务组件文件命名应该以 the 为前缀命名，以示其唯一性，并且以横线连接。\n\n```\n例子：\nsrc\n└─ views\n   └─ components\n      └─ the-loading\n         ├─ index.js      //源码\n         ├─ index.scss    //样式\n         └─ README.md     //组件使用说明文档\n```\n\n### 路由文件创建与命名。 【注：src/config/router 目录。】\n\n为了方便维护与开发，建议路由文件命名与对应的页面文件命名保持一致，尽量简洁明了。\n\n```\n例子：\nsrc\n└─ config\n   └─ router\n      |- index.js\n      |- dev.js\n      └─ home.js\n```\n\n### 接口文件创建与命名。 【注：src/config/apis 目录。】\n\n为了方便维护与开发，建议接口文件命名与对应的页面文件命名保持一致，尽量简洁明了。\n\n```\n例子：\nsrc\n└─ config\n   └─ apis\n      |- index.js\n      └─ home.js\n```\n\n### 状态切片文件创建与命名。 【注：src/config/store 目录。】\n\n为了方便维护与开发，建议以当前对应模块或者功能命名文件夹，尽量简洁明了。\n\n```\n例子：\nsrc\n└─ config\n   └─ store\n      └─ dev\n         └─ index.js\n```\n\n### 图片资源。 【注：src/assets/img 目录。】\n\n建议图片文件夹命名与对应的页面文件命名保持一致，公共图片资源放置到 src/assets/img/base 目录下即可。\n\n```\n例子：\nsrc\n└─ assets\n   └─ img\n```\n\n## git 版本规范\n\n### 分支管理\n\n一般项目分主分支（master）和其他分支。 当有团队成员要开发新功能(Feather)或改 BUG(Fix) 时，就从 master 分支开一个新的分支。\n\n### Commit 规范\n\n-   feat 新增功能\n-   fix 修复 bug\n-   docs 文档变更\n-   style 代码格式（不影响功能，例如空格、分号等格式修正）\n-   refactor 代码重构\n-   perf 改善性能\n-   test 测试\n-   build 变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）\n-   ci 更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等\n-   chore 变更构建流程或辅助工具\n-   revert 代码回退\n\n### Tag 版本号\n\n版本号以 v 开头，根据当前仓库的 tag 编号进行累加，如：v1.10.45。\n\n## 项目目录说明\n\n```\nreact-h5-tmp\n├─ .env.development                     // 开发环境配置文件\n├─ .env.production                      // 生产环境配置文件\n├─ .env.test                            // 测试环境配置文件\n├─ .eslintignore                        // ESLint 忽略配置文件\n├─ .eslintrc.js                         // ESLint 配置文件\n├─ .npmrc                               // NPM 配置文件\n├─ .prettierrc.js                       // Prettier 配置文件\n├─ .vscode                              // VSCode 配置目录\n├─ babel.config.js                      // Babel 配置文件\n├─ craco.config.js                      // Craco 配置文件\n├─ jsconfig.json                        // JSConfig 配置文件\n├─ package.json                         // 项目配置文件\n├─ pnpm-lock.yaml                       // Pnpm 锁定文件\n├─ postcss.config.js                    // PostCSS 配置文件\n├─ public                               // 公共资源目录\n├─ README.md                            // 项目说明文档\n├─ run.bat                              // Windows 平台运行脚本\n└─ src                                  // 项目源代码目录\n   ├─ assets                            // 资源文件目录\n   ├─ config                            // 配置文件目录\n   ├─ index.js                          // 项目入口文件\n   ├─ layout                            // 布局组件目录\n   ├─ packages                          // 自定义包目录\n   │  ├─ console                        // 控制台包\n   │  ├─ request                        // 请求包\n   │  ├─ router                         // 路由包\n   │  └─ store                          // 状态管理包\n   ├─ reportWebVitals.js                // Web 性能报告文件\n   ├─ resources                         // 资源目录\n   │  ├─ components                     // 通用组件目录\n   │  └─ plugin                         // 插件目录\n   ├─ utils                             // 工具目录\n   │  ├─ helper                         // 辅助函数目录\n   │  └─ tools                          // 工具函数目录\n   └─ views                             // 视图组件目录\n\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoukaiyue%2Freact-h5-tmp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhoukaiyue%2Freact-h5-tmp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoukaiyue%2Freact-h5-tmp/lists"}