# h5-template-react-antd-mobile

**Repository Path**: zzginfo/h5-template-react-antd-mobile

## Basic Information

- **Project Name**: h5-template-react-antd-mobile
- **Description**: 项目模板：技术栈： React 18 ，vite5，Ant Design Mobile 5，Tailwind CSS 3，React Router 6，Zustand，Axios。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2025-10-30
- **Last Updated**: 2025-12-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 环境变量与命令

创建以下根目录环境文件（Vite 会按 `--mode` 读取 `.env.{mode}`）：

```
# .env.development
VITE_APP_ENV=development
VITE_API_BASE=/api-dev

# .env.test
VITE_APP_ENV=test
VITE_API_BASE=/api-test

# .env.production
VITE_APP_ENV=production
VITE_API_BASE=/api
```

命令：

```
npm run dev         # 开发环境启动（使用 .env.development）
npm run dev:test    # 测试环境启动（使用 .env.test）
npm run build:dev   # 开发环境构建
npm run build:test  # 测试环境构建
npm run build:prod  # 生产环境构建（使用 .env.production）
```

在代码内通过 `import.meta.env` 读取，例如：

```ts
import.meta.env.VITE_APP_ENV
import.meta.env.VITE_API_BASE
```


npm config set registry https://registry.npmmirror.com

npm install

## 技术栈（官网）

- 前端框架：React 18（[react.dev](https://react.dev)）+ TypeScript 5（[www.typescriptlang.org](https://www.typescriptlang.org)）
- 构建工具：Vite 5（[vite.dev](https://vite.dev)）+ @vitejs/plugin-react（[github.com/vitejs/vite-plugin-react](https://github.com/vitejs/vite-plugin-react)）
- UI 组件：Ant Design Mobile 5（[mobile.ant.design](https://mobile.ant.design)）+ antd-mobile-icons（[github.com/ant-design/ant-design-icons](https://github.com/ant-design/ant-design-icons)）
- 样式体系：Tailwind CSS 3（[tailwindcss.com](https://tailwindcss.com)）+ PostCSS（[postcss.org](https://postcss.org)）+ Autoprefixer（[github.com/postcss/autoprefixer](https://github.com/postcss/autoprefixer)）
- 路由管理：React Router 6（[reactrouter.com](https://reactrouter.com)）
- 状态管理：Zustand（[zustand-demo.pmnd.rs](https://zustand-demo.pmnd.rs)）
- 网络请求：Axios（[axios-http.com](https://axios-http.com)）（拦截器、全局 Loading、错误提示、鉴权注入）

## 目录结构

```
.
├─ index.html                      # 入口 HTML（含移动端 meta）
├─ vite.config.ts                  # Vite 配置（含 /api 代理）
├─ tsconfig.json                   # TS 配置与路径别名 @/*
├─ tailwind.config.cjs             # Tailwind 配置
├─ postcss.config.cjs              # PostCSS 配置
├─ .eslintrc.cjs / .prettierrc     # 代码规范与格式化
├─ .env.*                          # 多环境变量
└─ src
   ├─ main.tsx                     # 应用入口
   ├─ app
   │  ├─ router.tsx               # 路由配置（/login、/app/*、/detail/:id）
   │  └─ store.ts                 # Zustand 示例
   ├─ pages
   │  ├─ AppLayout.tsx            # 带底部 TabBar 的布局（固定底部）
   │  ├─ Home.tsx                 # 首页（示例按钮 + 接口调用）
   │  ├─ Mine.tsx                 # 我的
   │  ├─ List.tsx                 # 列表（跳转详情）
   │  ├─ Detail.tsx               # 详情
   │  ├─ Login.tsx                # 登录（点击登录跳首页）
   │  └─ NotFound.tsx             # 404
   ├─ services
   │  ├─ http.ts                  # Axios 实例（Loading/错误文案/鉴权）
   │  └─ api.ts                   # 示例 API（getHello/getPosts/getPostDetail）
   ├─ styles
   │  ├─ tailwind.css             # Tailwind 引入
   │  └─ globals.css              # 全局样式与安全区处理
   ├─ utils
   │  ├─ env.ts                   # 环境工具
   │  └─ storage.ts               # 本地存储工具
   └─ types
      └─ axios.d.ts               # Axios 扩展 meta 类型
```

## 启动与访问

1) 安装依赖并启动：
```
npm install
npm run dev
```
2) 访问：
- 登录页：/login（默认）
- 首页：/app
- 我的：/app/mine
- 列表：/app/list（点击项进入 /detail/:id）