{"id":28657621,"url":"https://github.com/huangmingfu/react-mobile-template","last_synced_at":"2026-04-20T10:32:33.826Z","repository":{"id":269636954,"uuid":"908057570","full_name":"huangmingfu/react-mobile-template","owner":"huangmingfu","description":"一套基于react18、ts、vite6的移动端项目模板","archived":false,"fork":false,"pushed_at":"2025-05-24T04:06:32.000Z","size":373,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-13T09:13:37.604Z","etag":null,"topics":["antd-mobile","mobile","react","react-template","react18-mobile-template","template","vite"],"latest_commit_sha":null,"homepage":"https://huangmingfu.github.io/react-mobile-template/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huangmingfu.png","metadata":{"files":{"readme":"README.en-US.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-25T02:28:47.000Z","updated_at":"2025-06-10T09:18:22.000Z","dependencies_parsed_at":"2024-12-25T03:24:34.295Z","dependency_job_id":"0e5ed285-429c-4370-8315-ab12c91b215d","html_url":"https://github.com/huangmingfu/react-mobile-template","commit_stats":null,"previous_names":["huangmingfu/react-mobile-template"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/huangmingfu/react-mobile-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangmingfu%2Freact-mobile-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangmingfu%2Freact-mobile-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangmingfu%2Freact-mobile-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangmingfu%2Freact-mobile-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huangmingfu","download_url":"https://codeload.github.com/huangmingfu/react-mobile-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangmingfu%2Freact-mobile-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32043026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","mobile","react","react-template","react18-mobile-template","template","vite"],"created_at":"2025-06-13T09:13:35.834Z","updated_at":"2026-04-20T10:32:33.811Z","avatar_url":"https://github.com/huangmingfu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Mobile Template\n\nGitHub Project Link: [React-Mobile-Template](https://github.com/huangmingfu/react-mobile-template)\n\nThis is a **mobile project template** based on [React-Ts-Template](https://github.com/huangmingfu/react-ts-template), aimed at helping you quickly start mobile H5 projects and save a lot of repetitive configuration time. The template integrates various development specifications and popular plugins, ready to use out of the box, allowing you to focus on business logic implementation!\n\n## Features\n\n- **Route Lazy Loading**: Implemented route lazy loading to improve page switching performance and reduce initial loading time. (See `router`)\n- **Route Guard**: Flexible route guard management to ensure user access control and enhance application security. (See `router`)\n- **Global State Management**: Provides Zustand global state management example code to simplify cross-component state sharing and improve development efficiency. (See `store`)\n- **Axios Request Encapsulation**: Encapsulates Axios to uniformly handle HTTP requests and responses, simplifying interaction with backend interfaces. (See `services`)\n- **Utility Functions and Hooks**: Provides convenient utility functions and hooks. (See `utils`, `hooks`)\n- **react-dev-inspector Integration**: Click page elements to open corresponding code directly in IDE, facilitating developer debugging and improving development efficiency. (See `vite.config.ts`)\n- **Automatic Import Sorting**: Integrated with prettier-plugin-sort-imports to automatically beautify import order, improving code readability and maintainability\n- **Other Features**: Provides convenient commands for environment-specific running and packaging; configured code splitting strategy; local reverse proxy to solve cross-origin issues; detailed \"nanny-level comments\", etc.\n\n## Technology Stack\n\n### 🛠 Technology Selection\n\n- **React 18 \u0026 React-DOM**: Using the latest React version for high-performance front-end and smoother user experience\n- **React-Router**: Latest v7 version, supporting route lazy loading and optimizing page switching performance\n- **rem**: Using rem units for mobile adaptation, ensuring consistent display across different devices\n- **antd-mobile**: Alibaba's open-source mobile component library, providing rich UI components and simplifying development process\n- **SCSS Preprocessor**: Fully adopting new SCSS version, using `@use` instead of `@import` for stronger modularity\n- **ahooks**: Provides rich React Hooks similar to VueUse, further simplifying logical code\n- **zustand**: Lightweight state management library\n- **Immer**: Simplifies immutable data structure operations\n- **Lodash-es**: Provides common utility functions. If you prefer modern ES implementation, you can also consider `es-toolkit`.\n- **Axios**: HTTP request library\n- **classnames**: Dynamic class name management tool\n- **Dayjs**: Lightweight date processing library\n\n## Project Standards and Configuration\n\nTo ensure code consistency and standardization during team collaboration, the project introduces:\n\n- **Full ESM Standard**: Using modular imports\n- **Package Manager**: Strictly using pnpm\n- **Style Naming Convention**: BEM naming standard\n- **File Naming**: Unified `kebab-case`\n\n### 💡 Efficient Code Standard Management\n\n- **@antfu/eslint-config**: Pre-configured ESLint rules that cover best practices and common error detection, helping developers write high-quality TypeScript and JavaScript code.\n- **simple-git-hooks**: Automatically runs code checks and formatting via Git Hooks, ensuring that every commit and push conforms to project standards, reducing code review workload, and improving code consistency.\n- **EditorConfig**: Unified editor configuration\n\n## Summary\n\n**React-Mobile-Template** aims to reduce initial configuration steps through preset best practices, allowing developers to quickly start project development. It comes with a mature development toolchain and powerful plugin support to ensure team development consistency and high-quality code.\n\n**👉 Star the project and start your React mobile project journey!**\n\n\u003e [React-Mobile-Template](https://github.com/huangmingfu/react-mobile-template)\n\n## Notes\n\n1. Currently, some UI libraries do not support React 19. This project uses version 18.3.1, so be cautious when upgrading the React version.\n2. The `postcss-pxtorem` plugin does not support inline styles, so a `px2rem` function is provided in `utils` to address this. Example: `\u003cdiv style={{ width: px2rem(100) }}\u003etest\u003c/div\u003e`\n3. The `postcss-pxtorem` plugin will not convert px to rem in the following scenarios:\n\n(1). When styles are imported in `main.ts`, such as `import '@/styles/scss/global.scss';`. It is recommended to import styles that do not involve px, such as `reset.css`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuangmingfu%2Freact-mobile-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuangmingfu%2Freact-mobile-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuangmingfu%2Freact-mobile-template/lists"}