快速开始
本文会帮助你从头启动项目
环境准备
- 推荐使用 pnpm>=10.5.0，否则依赖可能安装不上，出现打包报错等问题
- Node.js 版本要求
20.x以上，这里推荐>= 20.19.0 || >= 22.12.0 || >= 24.0.0
Vscode 配套插件
如果你使用的 IDE 是vscode(推荐)的话，可以安装以下工具来提高开发效率及代码格式化
- Tailwind CSS IntelliSense - Tailwind CSS 提示插件
- 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 代码片段支持
代码获取
我们提供了以下几种方式拉取代码
脚手架
bash
# 复制命令 - project 为你的项目名称
pnpm create lemon project -t mobile-reactGitHub 模板
克隆使用
bash
# 克隆项目
git clone https://github.com/sankeyangshu/lemon-mobile-react.git
# 进入项目目录
cd lemon-mobile-react
# 安装依赖 - 推荐使用pnpm
pnpm install
# 启动服务
pnpm dev
# 打包发布
pnpm build:prodnpm scripts
json
{
// 启动项目开发环境服务
"dev": "vite",
// 打包构建开发环境代码
"build:dev": "tsc && vite build --mode development",
// 打包构建生产环境代码
"build:prod": "tsc && vite build --mode production",
// 打包构建测试环境代码
"build:test": "tsc && vite build --mode test",
// 执行 ESLint 检查代码规范
"lint": "eslint",
// 执行 ESLint 检查并自动修复代码
"lint:fix": "eslint --fix",
// 运行单元测试脚本
"test": "vitest",
// 本地环境预览构建后的dist
"preview": "vite preview",
// 类型检查
"typecheck": "tsc --noEmit --skipLibCheck",
// 清理缓存文件
"clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
// 清理依赖包文件
"clean:lib": "rimraf node_modules",
// 发布新版本
"release": "bumpp",
// 限制仅允许使用 pnpm 作为包管理器
"preinstall": "npx only-allow pnpm",
// 初始化 simple-git-hooks
"prepare": "simple-git-hooks"
}目录结构
lemon-mobile-react
├── .github // GitHub 配置文件
│ ├─ workflows // 工作流
│ │ └─ release.yml // 发布任务
├── .vscode // vscode 配置文件
│ ├── extensions.json // vscode推荐的插件
│ └── settings.json // vscode配置(在该项目中生效)
├── build // vite构建相关配置和插件
│ ├── config // 构建打包配置
│ │ ├── index.ts // 配置汇总
│ │ ├── proxy.ts // 代理配置
│ │ ├── time.ts // 打包时间
│ │ └── utils.ts // 工具函数
│ └── plugins // 构建插件
│ ├── html.ts // html插件
│ ├── index.ts // 插件汇总
│ ├── info.ts // 打包信息插件
│ ├── unplugin.ts // svg图标插件
│ └── vconsole.ts // 移动端调试插件
├── mock // mock数据
│ ├── modules // mock数据模块
│ └── utils // mock工具函数
├── public // 静态资源(文件夹里面的资源打包后会在根目录下)
│ ├── logo.png // 网站logo
│ └── favicon.svg // 网站logo
├── src // 源码目录
│ ├── api // 接口请求统一管理
│ ├── assets // 图片、字体和图标等静态资源
│ ├── components // 组件
│ │ ├── common // 公共组件
│ │ │ ├── forbidden.tsx // 权限组件
│ │ │ ├── theme-provider.tsx // 主题组件
│ │ │ ├── lang-provider.tsx // 国际化语言组件
│ │ │ └─ ...
│ │ ├── custom // 自定义组件
│ │ │ ├── svg-icon.tsx // svg图标组件
│ │ │ ├── toast.tsx // 通知组件
│ │ │ ├── tabbar.tsx // 底部导航组件
│ │ │ └─ ...
│ ├── hooks // 自定义hooks
│ │ ├── use-chart.ts // ECharts hooks
│ │ └── ...
│ ├── lib // 工具函数
│ │ ├── request // 网络请求封装
│ │ ├── storage.ts // 存储封装函数
│ │ └── util // 公共工具函数
│ ├── locales // 国际化配置
│ │ ├── index.ts // 国际化配置汇总
│ │ └── modules // 语言文件
│ ├── pages // 业务代码页面
│ ├── plugins // 插件
│ ├── store // zustand状态管理
│ ├── styles // 全局样式
│ ├── types // 类型定义
│ ├── App.tsx // React文件入口
│ ├── main.tsx // 项目入口TS文件
│ └── routeTree.gen.ts // 路由
├── .editorconfig // 统一编辑器配置
├── .env // 环境变量配置
├── .env.development // 开发环境变量配置
├── .env.production // 生产环境变量配置
├── .gitignore // git 提交忽略文件
├── LICENSE // 开源协议
├── README.md // 项目英文说明
├── README.zh-CN.md // 项目中文说明
├── commitlint.config.ts // commitlint配置
├── eslint.config.ts // eslint配置
├── index.html // html文件
├── package.json // npm依赖描述文件
├── pnpm-lock.yaml // npm包管理器pnpm依赖锁定文件
├── tsconfig.json // tsconfig配置
├── vercel.json // vercel配置
└── vite.config.ts // vite配置提交规范
项目使用 simple-git-hooks 和 commitlint 规范 Git 提交信息，遵循社区主流的 Angular 规范。
feat: 新增功能fix: 修复 bugdocs: 文档变更style: 代码格式（不影响功能，例如空格、分号等格式修正）refactor: 代码重构（不包括 bug 修复、功能新增）perf: 性能优化test: 添加、修改测试用例build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）ci: 修改 CI 配置、脚本chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）revert: 回滚 commit