基于 React + TypeScript + Vite 的现代化移动端开发模板
- 核心框架：React 18 + TypeScript
- 构建工具：Vite 5
- UI 框架：Ant Design Mobile 5
- 状态管理：Zustand
- 路由：React Router 6
- HTTP 客户端：Axios
- 样式方案：Less + TailwindCSS
- 国际化：react-intl
- 工具库：ahooks, dayjs, md5
-
工程化配置
- ESLint + Prettier + Stylelint 代码规范
- Husky + Commitlint Git 提交规范
- TypeScript 类型检查
- 多环境配置（development/test/production）
-
开发体验
- 热更新
- 代码格式化
- 自动修复
- 提交信息规范化
-
性能优化
- 代码分割
- 资源压缩
- 按需加载
- 构建分析
-
特色功能
- 响应式设计
- 基于 rem 的移动端适配方案
- 支持多端自适应布局
- 内置常用移动端组件
- Hooks 能力
- 内置常用业务 Hooks如打字机效果、弱网检查等
- 支持自定义 Hooks 开发
- 集成 ahooks 常用功能
- 状态管理
- 基于 Zustand 的轻量级状态管理
- 支持持久化存储
- 模块化状态管理方案
- 工具集成
- 内置 HTTP 请求封装
- 国际化解决方案
- 主题定制能力
- 错误边界处理
- 路由权限控制
- 响应式设计
# 安装依赖
npm install
# 启动开发服务器
npm start
# 构建生产环境
npm run build
# 代码格式化
npm run format
# 提交代码
npm run commit-
代码规范
- 使用 TypeScript 编写代码
- 遵循 ESLint 和 Prettier 配置
- 提交前进行代码格式化
- 使用规范化的提交信息
-
开发建议
- 组件按功能模块划分
- 合理使用状态管理
- 注意性能优化
- 保持代码可维护性
- 优先使用内置 Hooks
- 遵循响应式设计规范
-
环境配置
- 开发环境：.env.development
- 测试环境：.env.test
- 生产环境：.env.production
├── src/ # 源代码
│ ├── components/ # 公共组件
│ ├── hooks/ # 自定义 Hooks
│ ├── pages/ # 页面组件
│ ├── services/ # API 服务
│ ├── store/ # 状态管理
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ └── locales/ # 国际化资源
├── doc/ # 文档
├── public/ # 静态资源
├── .husky/ # Git hooks
├── .vscode/ # VSCode 配置
└── config/ # 配置文件
node langCollect.js 文件路径/文件夹
可将当前文件/文件夹下的所有 js/ts/tsx后缀的文件 hooks内自动增加以下操作：
// 第一步
import { useLocale } from '@/locales';
> 它将判断当前文件是否存在需要国际化的文案，若存在，则判断是否有文案不在hooks内，若有，则 `import { useLocale , translateMessage as $t } from '@/locales';` 增加translateMessage as $t 的引入
// 第二步
> 在hooks内引用声明 $t 函数： const { $t } = useLocale();
// 第三步
> 将所有需要国际化的文案文案用 $t() 函数包裹起来，如 $t('登录')
// 第四步
> 通过执行 node language.js 文件/文件夹 将所有范围内的 如 $t('登录') 增加key值，并将唯一key添加到国际化json中作为key值，将被包裹的数值作为value，如
zh_CN.json中：
{ "AccountLogin.AccountLogin.NK3cAA": "登录" }