README.zh-CN.md

lemon-template-react

English / 简体中文

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

文档 / 反馈

---

简介

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

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

Note

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！

在线预览

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

其他模版

• 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 规范提交信息

基础知识

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

• 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 基本语法

环境准备

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

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

Vscode 配套插件

如果你使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化

• UnoCSS - UnoCSS 提示插件
• DotENV - .env 文件 高亮
• Error Lens - 更好的错误定位
• EditorConfig for VS Code - 不同 IDE 维护一致的编码样式
• ESLint - 脚本代码检查
• i18n Ally - 多合一的 I18n 支持
• JavaScript and TypeScript Vscode Snippets - JavaScript 和 TypeScript 代码片段
• React Collection Vscode Snippets - 提供 React 代码片段支持

安装和使用

使用脚手架

开发中

GitHub 模板

使用这个模板创建仓库

克隆使用

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

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

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

# 启动服务
pnpm dev

# 打包发布
pnpm build

Git 提交规范

提交规范

项目使用 simple-git-hooks 和 commitlint 规范 Git 提交信息，遵循社区主流的 Angular 规范。

• feat: 新增功能
• fix: 修复 bug
• docs: 文档变更
• style: 代码格式（不影响功能，例如空格、分号等格式修正）
• refactor: 代码重构（不包括 bug 修复、功能新增）
• perf: 性能优化
• test: 添加、修改测试用例
• build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
• ci: 修改 CI 配置、脚本
• chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
• revert: 回滚 commit

社区

您可以使用 issue 来反馈问题，或者提交一个 Pull Request。

浏览器支持

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