介绍

lemon-template-react 一个基于 React 18 生态系统的移动 web 应用模板，使用了最新的React18、Vite6、react-vant、Zustand、Typescript、UnoCSS等主流技术开发，内置了 layout布局、请求封装、请求拦截、登录拦截 等基础功能，同时还提供了业务当中常用的组件，例如：Dark Mode、i18n、Mock、ECharts、Zustand 持久化、KeepAlive 等示例。采用模块化设计，无需额外配置，开箱即用，让开发者能够专注于业务逻辑的开发。

在线预览

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

特性

• ⚡️ 使用 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 规范提交信息

基础知识

提前了解和学习这些知识会对使用本项目有很大的帮助。

• React - 熟悉 React 基础语法
• Vite - 熟悉 Vite 特性
• Zustand - 熟悉 Zustand 基本使用
• TypeScript - 熟悉 TypeScript 基本语法
• React-Router - 熟悉 React-Router基本使用
• Icones - 本项目推荐图标库，当然你也可以使用 IconSVg
• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
• ahooks - 一套高质量可靠的 React Hooks 库
• React Vant - 轻量、可靠的移动端 React 组件库
• ECharts5 - 熟悉 Echarts 基本使用
• Mock.js - 了解 Mockjs 基本语法
• Es6+ - 熟悉 ES6 基本语法

浏览器支持

• 本地开发推荐使用 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

许可证

MIT License © 2023-PRESENT sankeyangshu