Introduction

lemon-template-react is a mobile web application template based on the React 18 ecosystem, using the latest React18, Vite6, react-vant, Zustand, Typescript, UnoCSS and other mainstream technologies. It comes with built-in layout, request encapsulation, request interception, login interception, and other basic functionalities. It also provides commonly used components in business applications, such as Dark Mode, i18n, Mock, ECharts, Zustand persistence, KeepAlive, and more examples. Using a modular design, it requires no additional configuration and is ready to use out of the box, allowing developers to focus on business logic development.

Online Preview

👓 Click here (Please switch to mobile mode in PC browser)

Features

⚡️ Developed with React + Hooks
✨ Uses Vite6 as project development and build tool (configured with Gzip packaging, TSX syntax, cross-origin proxy...)
🍕 Full project integration with TypeScript
🍍 Uses Zustand for state management, lightweight, simple, and easy to use
📦 ahooks high-quality and reliable React Hooks library
🎨 react-vant component library
🌀 UnoCSS instant atomic CSS engine
👏 Integrated multiple icon solutions
🌓 Support for dark mode
🌍 Multi-language internationalization, supports i18n solution
🔥 Integrated Echarts data visualization charts, encapsulated useECharts Hooks
⚙️ Uses Vitest for unit testing
☁️ Axios encapsulation
💾 Support for local Mock data simulation
📱 Browser adaptation - uses viewport vw/vh units for layout
📥 Package resource gzip compression
🛡️ First screen loading animation
💪 Integrated Eslint code validation standard, and this Eslint configuration defaults to using Prettier for code formatting
🌈 Uses simple-git-hooks, lint-staged, commitlint to standardize commit messages

Basic Knowledge

Understanding and learning these technologies in advance will greatly help in using this project.

React - Familiar with React basic syntax
Vite - Familiar with Vite features
Zustand - Familiar with Zustand basic usage
TypeScript - Familiar with TypeScript basic syntax
React-Router - Familiar with basic use of React-Router
Icones - Recommended icon library for this project, you can also use IconSVg
UnoCSS - High-performance and highly flexible instant atomic CSS engine
ahooks - A high-quality and reliable React Hooks library
React Vant - Lightweight and reliable mobile React component library
ECharts5 - Familiar with basic use of Echarts
Mock.js - Understand basic Mockjs syntax
Es6+ - Familiar with ES6 basic syntax

Browser Support

For local development, we recommend using the latest version of Chrome browser Download.
Production environment supports modern browsers, no longer supports IE browser, for more browser compatibility information, please check Can I Use Es Module.