# web3-template-react

**Repository Path**: ZY_RAN/web3-template-react

## Basic Information

- **Project Name**: web3-template-react
- **Description**: web3 快捷开发项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-09
- **Last Updated**: 2026-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# H5 项目页面模板

一个基于 React + TypeScript + Vite 的 H5 移动端项目模板，集成了 Web3 功能支持。

## 技术栈

- **前端框架**: React 18 + TypeScript
- **构建工具**: Vite
- **UI 组件库**: [NutUI](https://nutui.jd.com/h5/react/3x/) (京东移动端组件库)
- **状态管理**: Zustand
- **路由**: React Router
- **Web3**: Wagmi (以太坊钱包连接)
- **国际化**: i18n 支持
- **代码规范**: ESLint + Prettier + Stylelint + Husky + Lint-staged

## 项目目录结构

```
src/
├── api/                    # API 接口
│   ├── index.ts
│   └── system.ts
├── assets/                 # 静态资源
│   ├── images/             # 图片资源
│   │   ├── logo/           # Logo 图片
│   │   └── tabbar/         # 底部导航图标
│   └── styles/             # 全局样式
│       └── reset.css
├── components/             # 公共组件
│   └── LoadingSpinner/     # 加载动画组件
├── config/                 # 配置文件
├── constant/               # 常量定义
├── hooks/                  # 自定义 Hooks
│   ├── useRequest.ts       # 请求 Hook
│   └── useTranslation.ts   # 国际化 Hook
├── i18n/                   # 国际化资源
│   ├── i18nText.csv
│   ├── i18nText.ts
│   └── translation.py      # CSV 转 JS 工具
├── stores/                 # 状态管理
│   ├── index.ts
│   ├── system.ts           # 系统状态
│   └── user.ts             # 用户状态
├── types/                  # TypeScript 类型定义
│   ├── http.d.ts           # HTTP 响应类型
│   └── typings.d.ts        # 全局类型
├── utils/                  # 工具函数
│   ├── ajax.ts             # HTTP 请求封装
│   ├── crypto-utils.ts     # 加密工具
│   ├── sign.ts             # 签名工具
│   └── index.ts
├── views/                  # 页面视图
│   ├── home/               # 首页
│   ├── order/              # 订单页
│   ├── mine/               # 我的页面
│   └── index.tsx           # 底部导航组件
├── App.tsx                 # 根组件
├── main.tsx                # 入口文件
└── wagmi.ts                # Web3 配置
```

## 开发环境要求

- **Node.js**: v20.12.2
- **npm**: 10.5.0
- **Python**: 3.13.3 (用于国际化资源转换)

## 快速开始

### 安装依赖

```bash
yarn install
```

### 开发模式

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

### 代码检查与修复

```bash
# 检查并修复代码格式
npm run lint

# 检查样式
npm run lint:style
```

## Git 提交规范

本项目使用 Commitlint 和 Husky 强制提交信息规范。使用以下命令进行提交：

```bash
npx cz
```

### 提交类型说明

| 类型 | 说明 |
|------|------|
| `feat` ✨ | 新增功能 |
| `fix` 🐛 | 修复缺陷 |
| `docs` 📝 | 文档更新 |
| `style` 💄 | 代码格式（不影响运行） |
| `refactor` ♻️ | 代码重构 |
| `perf` ⚡️ | 性能提升 |
| `test` ✅ | 测试相关 |
| `build` 📦️ | 构建相关 |
| `ci` 🎡 | 持续集成配置 |
| `chore` 🔨 | 其他修改 |
| `revert` ⏪️ | 回退代码 |

## 页面路由

项目默认包含三个底部导航页面：

- **首页** (`/home`) - HomeView
- **订单** (`/order`) - OrderView  
- **我的** (`/mine`) - MineView

## 功能特性

### HTTP 请求

项目封装了基于 Axios 的 HTTP 请求工具，支持请求/响应拦截器。

```typescript
import { $http } from '@/utils/ajax';

// 使用示例
const res = await $http.get('/api/user/info');
```

### 状态管理

使用 Zustand 进行状态管理，提供了系统状态和用户状态的 Store。

```typescript
import { useSystemStore, useUserStore } from '@/stores';

// 使用系统状态
const { theme, setTheme } = useSystemStore();

// 使用用户状态
const { userInfo, setUserInfo } = useUserStore();
```

### 国际化

支持多语言切换，通过 `useTranslation` Hook 获取翻译文本。

```typescript
import { useTranslation } from '@/hooks/useTranslation';

const { t } = useTranslation();
const welcomeText = t('welcome');
```

### Web3 支持

集成了 Wagmi 用于连接以太坊钱包，支持多链配置。

## 环境变量

项目支持多环境配置：

- `.env.development` - 开发环境
- `.env.test` - 测试环境
- `.env.production` - 生产环境

## 部署

项目提供了测试环境部署脚本 `deploy-test.sh`，可配置远程服务器进行自动化部署。

```bash
./deploy-test.sh
```

## 许可证

请查看项目根目录下的 LICENSE 文件获取授权信息。