Lemon Template React：一个基于 React 生态系统的移动 web 应用模板！轻松上手开发！

lemon-template-react

一个基于 React 生态系统的移动 web 应用模板。

简介

🚀🚀🚀 lemon-template-react 使用了最新的React18、Vite6、React Vant、Zustand、Typescript、UnoCSS等主流技术开发，集成 Dark Mode（暗黑）模式和系统主题色、Mock 数据等功能。

你可以在此之上直接开发你的业务代码！希望你能喜欢。👋👋👋

在线预览

👓 点击这里（PC 浏览器请切换手机端模式）

项目截图

仓库地址 (欢迎 Star⭐)

• Github

文档地址

• 文档地址

其他模版

• lemon-template-vue - 基于 Vue 3 生态系统的移动 web 应用模板

项目功能

• ⚡️ 使用 React + Hooks 开发
• ✨ 采用 Vite6 作为项目开发、打包工具（配置 Gzip 打包、TSX 语法、跨域代理…）
• 🍕 整个项目集成了 TypeScript
• 🍍 使用 Zustand 做状态管理，轻量、简单、易用
• 📦 ahooks 高质量可靠的 React Hooks 库
• 🎨 React Vant 组件库
• 🌀 UnoCSS 即时原子化 CSS 引擎
• 👏 集成多种图标方案
• 🌓 支持深色模式
• 🌍 多语言国际化，支持 i18n 国际化方案
• 🔥 集成 Echarts 数据可视化图表，封装 useECharts Hooks
• ⚙️ 使用 Vitest 进行单元测试
• ☁️ Axios 封装
• 💾 本地 Mock 数据模拟的支持
• 📱 浏览器适配 - 使用 viewport vw/vh 单位布局
• 📥 打包资源 gzip 压缩
• 🛡️ 首屏加载动画
• 💪 集成 Eslint 代码校验规范，并且该 Eslint 配置默认使用 Prettier 格式化代码，
• 🌈 使用 simple-git-hooks、lint-staged、commitlint 规范提交信息

环境准备

本地环境需要安装 Pnpm、Node.js 和 Git

• 推荐使用 pnpm>=8.15.4，否则依赖可能安装不上，出现打包报错等问题。
• Node.js 版本要求18.x以上，这里推荐 ^18.18.0 || >=20.0.0。

安装和使用

# 克隆项目
git clone https://github.com/sankeyangshu/lemon-template-react.git

# 进入项目目录
cd lemon-template-react

# 安装依赖 - 推荐使用pnpm
pnpm install

# 启动服务
pnpm dev

# 打包发布
pnpm build

线上接口

本地采用 Mock 数据，线上采用 EasyMock：

• EasyMock

浏览器支持

• 本地开发推荐使用 Chrome 最新版浏览器 Download。
• 生产环境支持现代浏览器，不在支持 IE 浏览器，更多浏览器可以查看 Can I Use Es Module。

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

结语

Lemon Template React 没有复杂的业务逻辑，适合开箱即用，也适合学习React时拿来练手

如果这个项目对您有一点点的帮助，请给个star👍👍👍