https://github.com/sankeyangshu/lemon-template-react
A mobile web apps template based on the React ecosystem. ๐ ไธไธชๅบไบ React ็ๆ็ณป็ป็็งปๅจ web ๅบ็จๆจกๆฟใ
https://github.com/sankeyangshu/lemon-template-react
axios i18n-react i18next react react-vant template typescript unocss vant zustand
Last synced: 2 months ago
JSON representation
A mobile web apps template based on the React ecosystem. ๐ ไธไธชๅบไบ React ็ๆ็ณป็ป็็งปๅจ web ๅบ็จๆจกๆฟใ
- Host: GitHub
- URL: https://github.com/sankeyangshu/lemon-template-react
- Owner: sankeyangshu
- License: mit
- Created: 2023-04-11T12:48:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-20T05:39:46.000Z (3 months ago)
- Last Synced: 2025-03-29T06:01:51.437Z (3 months ago)
- Topics: axios, i18n-react, i18next, react, react-vant, template, typescript, unocss, vant, zustand
- Language: TypeScript
- Homepage: https://lemon-template-react.vercel.app
- Size: 762 KB
- Stars: 168
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
lemon-template-react
English / [็ฎไฝไธญๆ](./README.zh-CN.md)
An mobile web apps template based on the React ecosystem.
[Docs](https://sankeyangshu.github.io/lemon-template-docs/react/) / [Feedback](https://github.com/sankeyangshu/lemon-template-react/issues)
---
## Introduction
๐๐๐ **lemon-template-react** is built using the latest technologies, including `React18`, `Vite6`, `react-vant`, `Zustand`, `TypeScript`, and `UnoCSS`. It integrates features like `Dark Mode`, system theme colors, and Mock data.
You can directly start developing your business logic on this template! Hope you enjoy it. ๐๐๐
> [!NOTE]
> If this project is helpful to you, please click the "Star" button in the top-right corner. Thank you!
## Preview
๐ [Click Demo](https://lemon-template-react.vercel.app) (Switch to mobile view on PC browsers)
## Other Templates
- [lemon-template-vue](https://github.com/sankeyangshu/lemon-template-vue) - A mobile web apps template based on the Vue 3 ecosystem
- [lemon-template-uniapp](https://github.com/sankeyangshu/lemon-template-uniapp) - An mobile web apps template based on the UniApp ecosystem
## Features
- โก๏ธ Developed with React + Hooks
- โจ Uses Vite 6 as the development and build tool (includes Gzip packaging, TSX syntax, proxy support, etc.)
- ๐ Fully integrates TypeScript
- ๐ Use Zustand for state management, lightweight, simple and easy to use
- ๐ฆ ahooks High quality and reliable React Hooks library
- ๐จ react-vant component library
- ๐ UnoCSS for instant atomic CSS
- ๐ Integrates multiple icon solutions
- ๐ Supports Dark Mode
- ๐ Multi-language support with i18n
- ๐ฅ ECharts for data visualization, with useECharts Hooks
- โ๏ธ Unit testing using Vitest
- โ๏ธ Axios encapsulation
- ๐พ Local Mock data support
- ๐ฑ Browser compatibility with viewport vw/vh units for layouts
- ๐ฅ Gzip compression for packaged resources
- ๐ก๏ธ Splash screen animation for first load
- ๐ช Eslint for code linting, with Prettier for formatting
- ๐ Uses simple-git-hooks, lint-staged, and commitlint for commit message standards
## Prerequisites
Familiarity with the following concepts will help you use this template effectively:
- [React](https://react.dev/) - Familiar with `React` basic syntax
- [Vite](https://cn.vitejs.dev/) - Understand `Vite` features
- [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) - Proficient in using `Zustand`
- [TypeScript](https://www.typescriptlang.org/) - Master basic `TypeScript` syntax
- [React-Router](https://reactrouter.com/en/main) - Understand `React-Router` usage
- [Icones](https://icones.js.org/) - Recommended icon library for the project, but `IconSVG` is also an option
- [UnoCSS](https://github.com/antfu/unocss) - High-performance and flexible atomic CSS engine
- [ahooks](https://ahooks.js.org/zh-CN/) - A reliable and high-quality React Hooks library
- [React Vant](https://react-vant.3lang.dev/) - Lightweight and reliable mobile React component library
- [ECharts5](https://echarts.apache.org/handbook/zh/get-started/) - Familiar with basic `ECharts` usage
- [Mock.js](https://github.com/nuysoft/Mock) - Understand basic `Mock.js` syntax
- [ES6+](http://es6.ruanyifeng.com/) - Proficient in `ES6+` syntax
## Environment Setup
Ensure the following tools are installed locally: [Pnpm](https://pnpm.io/), [Node.js](http://nodejs.org/), and [Git](https://git-scm.com/).
- Use [pnpm >= 8.15.4](https://pnpm.io/) to avoid dependency installation and build errors.
- [Node.js](http://nodejs.org/) version `18.x` or above is required. Recommended: `^18.18.0 || >=20.0.0`.
## VSCode Extensions
If you use [VSCode](https://code.visualstudio.com/) (recommended), install the following extensions for improved efficiency and code formatting:
- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - UnoCSS support
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv) - `.env` file highlighting
- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - Better error visualization
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - Maintain consistent coding styles across IDEs
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Script linting
- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All-in-one i18n support
- [JavaScript and TypeScript VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sankeyangshu.vscode-javascript-typescript-snippets) - Visual Studio Code snippets for JavaScript and TypeScript
- [React Collection VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sankeyangshu.vscode-react-collection-snippets) - A React Code Snippets Extension
## Usage
### Use the Scaffold
> In development
### GitHub Template
[Use this template to create a repository](https://github.com/sankeyangshu/lemon-template-react/generate)
### Clone
```bash
# Clone the project
git clone https://github.com/sankeyangshu/lemon-template-react.git
# Enter the project directory
cd lemon-template-react
# Install dependencies (use pnpm)
pnpm install
# Start the development server
pnpm dev
# Build for production
pnpm build
```
## Git Commit Guidelines
### Commit Standards
The project enforces Git commit messages using `simple-git-hooks` and `commitlint`, adhering to the widely adopted [Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular) guidelines.
- `feat`: Add new features
- `fix`: Fix bugs
- `docs`: Documentation changes
- `style`: Code formatting (does not affect functionality, e.g., spacing, semicolons, etc.)
- `refactor`: Code refactoring (neither bug fixes nor new features)
- `perf`: Performance optimizations
- `test`: Add or update test cases
- `build`: Changes to build process or external dependencies (e.g., updating npm packages, modifying webpack configuration)
- `ci`: Changes to CI configuration or scripts
- `chore`: Changes to build tools or auxiliary libraries (does not affect source files or tests)
- `revert`: Revert a previous commit
## Community
You can use [issues](https://github.com/sankeyangshu/lemon-template-react/issues) to report problems or submit a Pull Request.
## Browser Support
- For local development, we recommend using the latest version of Chrome. [Download](https://www.google.com/intl/en/chrome/).
- The production environment supports modern browsers. IE is no longer supported. For more details on browser support, check [Can I Use ES Module](https://caniuse.com/?search=ESModule).
| [
](http://godban.github.io/browsers-support-badges/)IE | [
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
| :----------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## License
[MIT](./LICENSE) License ยฉ 2023-PRESENT [sankeyangshu](https://github.com/sankeyangshu)