# Mobile App Generator

> 移动端应用框架生成器。采用 Vue3 + Vant + Vite + TypeScript + Mock.js。用于快速创建完整的移动端 H5 应用。使用场景：(1) 需要创建新的移动端项目，(2) 用户描述了底部导航结构、页面类型（列表/表单/详情）、主题颜色等需求，(3) 用户提供移动端设计稿，通过分析图片中的 Tabbar 结构、配色方案、页面布局来生成应用，(4) 需要一个带 Mock 数据的移动端前端项目（无需后端），(5) 快速搭建移动端应用原型。

- Skill: `wang-q-l/mobile-app-generator` (Agent Skill, multi-file: 42 files)
- Install (CLI): `npx skillmds@latest add wang-q-l/mobile-app-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wang-q-l/mobile-app-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wang-q-l (https://skillmd.com/u/wang-q-l)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wang-q-l/mobile-app-generator

---


# 移动端应用生成器

这是一个专门用于生成移动端 H5 应用的技能。它会创建一个完整的、可立即运行的移动端项目，包含：

- **技术栈**：Vue 3 + Vant + Vite + TypeScript + Pinia + Vue Router
- **移动端适配**：postcss-px-to-viewport 自动适配不同屏幕
- **布局方式**：底部 Tabbar 导航（类似微信、淘宝）
- **主题支持**：亮色/暗色主题切换
- **页面模板**：列表页（下拉刷新+上拉加载）、表单页、详情页、搜索页
- **Mock 数据**：内置 Mock.js，无需后端即可运行
- **移动端登录页**：垂直布局，渐变背景设计

## 快速开始

你可以通过以下三种方式快速创建移动端应用：

### 方式一：自然语言描述

**示例 1：**

```
创建一个电商移动端应用，底部导航包含首页、分类、购物车、我的，主题色用蓝色，需要暗黑模式
```

**示例 2：**

```
创建一个工具类应用，底部有首页、工具、我的三个导航，主题色用绿色
```

**示例 3：**

```
创建一个社交应用，底部导航有首页、消息、发现、我的，主题色用微信绿 #07c160，支持暗黑模式
```

### 方式二：提供设计稿/截图

你可以上传移动端设计稿或参考截图，我会自动分析：

**使用方式：**

```
/mobile-app-generator [上传截图] 根据这个设计稿创建移动端应用
```

**我会分析：**

- 底部 Tabbar 的结构（有几个标签页，分别是什么）
- 配色方案（主题色、背景色等）
- 页面布局风格
- 图标样式
- 是否使用暗色主题

**示例：**

```
/mobile-app-generator [上传淘宝首页截图] 参考这个布局创建一个电商应用
/mobile-app-generator [上传微信截图] 参考这个风格创建一个社交应用
```

### 方式三：简单调用（触发问答）

如果你不确定如何描述，直接调用：

```
/mobile-app-generator
```

我会通过问答方式收集信息。

---

**描述要素：**

- 应用类型（电商、社交、工具等）
- 底部导航栏的标签页（如：首页、工作台、我的）
- 主题颜色（如：蓝色、绿色、#1989fa）
- 是否需要暗黑模式（可选）

## 工作流程

### 1. 收集需求信息

**优先方式：自然语言描述**

如果你在调用技能时已经提供了应用描述（如"创建一个电商应用，底部有首页、分类、购物车、我的，主题色用蓝色"），我会直接解析你的需求并开始生成项目。

**必要信息：**

- 应用类型或用途
- 底部导航栏的标签页名称（如：首页、工作台、我的）
- 主题颜色（可选，默认蓝色 #1989fa）
- 是否需要暗黑模式（可选，默认支持）

**备选方式：问答收集**

如果你没有提供完整描述，我会通过以下方式收集信息：

**方式一：交互式问答**

- 应用类型（电商、社交、工具等）
- 底部导航栏配置
- 主题颜色选择
- 暗黑模式需求

**方式二：设计稿/截图分析**

你可以上传移动端设计稿、参考截图或手绘草图，我会分析并提取：

**分析内容：**

- **底部 Tabbar 结构**：识别有几个标签页，每个标签页的名称和功能
- **配色方案**：提取主题色、背景色、文字颜色等
- **页面布局**：分析页面组件类型（列表、卡片、网格等）
- **图标风格**：识别使用的图标类型
- **主题模式**：判断是亮色还是暗色主题

**支持的图片类型：**

- 移动端应用截图（微信、淘宝、美团等）
- UI 设计稿（Figma、Sketch 导出的图片）
- 手绘草图或原型图
- 参考应用的截图

**使用示例：**

```
/mobile-app-generator [上传截图] 参考这个布局创建应用
/mobile-app-generator [上传设计稿] 按照这个设计稿生成项目，主题色改成蓝色
```

### 2. 直接在当前目录生成项目文件

**重要说明：** 我会直接在当前工作目录下生成所有项目文件，不会创建子文件夹。

生成的文件包含：

```
当前目录/
├── package.json              # 项目依赖配置
├── vite.config.ts            # Vite 构建配置
├── tsconfig.json             # TypeScript 配置
├── postcss.config.js         # Viewport 适配配置
├── index.html                # HTML 入口
├── .gitignore                # Git 忽略文件
├── README.md                 # 项目说明
├── mock/                     # Mock 数据
│   ├── user.ts
│   └── product.ts
└── src/
    ├── main.ts               # 应用入口
    ├── App.vue               # 根组件
    ├── router/               # 路由配置
    ├── layout/               # 布局组件
    │   └── TabbarLayout.vue  # 底部导航布局
    ├── views/                # 页面组件
    │   ├── login/            # 登录页
    │   ├── home/             # 首页
    │   ├── category/         # 分类页
    │   ├── cart/             # 购物车
    │   └── profile/          # 我的
    ├── components/           # 页面模板
    │   ├── ListPage.vue      # 列表页模板
    │   ├── FormPage.vue      # 表单页模板
    │   ├── DetailPage.vue    # 详情页模板
    │   └── SearchPage.vue    # 搜索页模板
    ├── composables/          # 组合式函数
    │   ├── useList.ts        # 列表逻辑复用
    │   └── useTheme.ts       # 主题切换
    ├── styles/               # 样式文件
    │   ├── index.css         # 全局样式
    │   ├── variables.css     # CSS 变量
    │   └── vant-custom.css   # Vant 定制
    ├── utils/                # 工具函数
    │   └── request.ts        # 请求封装
    └── api/                  # API 接口
        └── user.ts
```

### 3. 配置 Viewport 适配

我会配置 `postcss-px-to-viewport` 插件，实现移动端自动适配：

- 设计稿基准：375px
- 自动将 px 转换为 vw
- Vant 组件已做适配处理
- 支持黑名单配置（不需要转换的类名）

详细配置请参考：`references/viewport-adaptation.md`

### 4. 自定义主题颜色

根据你提供的主题色，我会修改：

1. **CSS 变量**（`src/styles/variables.css`）
   - 主题色、成功色、警告色、危险色
   - 文字颜色、背景色
   - Tabbar 颜色配置

2. **Vant 主题配置**（`src/main.ts`）
   - ConfigProvider 全局主题色
   - 组件圆角、边框等样式

3. **暗黑模式变量**
   - 自动适配暗黑模式的颜色方案

详细配置请参考：`references/theme-customization.md`

### 5. 自定义移动端登录页

我会创建一个符合移动端设计规范的登录页：

**设计特点：**

- 顶部：渐变背景 + Logo + 系统名称（占 40% 高度）
- 中部：白色卡片 + 登录表单
- 底部：版权信息
- 支持记住账号功能
- 使用 Vant 表单组件

**可定制内容：**

- Logo 图片
- 系统名称
- 渐变背景颜色
- 登录字段（手机号/邮箱/用户名）

### 6. 配置底部导航栏（Tabbar）

根据你的需求，我会配置底部导航栏：

**配置内容：**

- 导航标签数量（通常 3-5 个）
- 每个标签的名称、图标、路由
- 徽标（badge）配置（如购物车数量）
- 激活颜色和默认颜色

**Vant 图标选择：**

- home-o（首页）
- apps-o（分类）
- shopping-cart-o（购物车）
- user-o（我的）
- search（搜索）
- chat-o（消息）
- star-o（收藏）
- orders-o（订单）

详细配置请参考：`references/tabbar-configuration.md`

### 7. 创建页面组件

为每个 Tabbar 标签创建对应的页面组件：

**页面类型：**

- **首页**：轮播图 + 分类入口 + 商品列表
- **分类页**：侧边分类 + 商品网格
- **购物车**：商品列表 + 结算栏
- **我的**：用户信息 + 功能入口 + 主题切换

**页面模板复用：**

- 使用 `components/ListPage.vue` 快速创建列表页
- 使用 `components/FormPage.vue` 快速创建表单页
- 使用 `components/DetailPage.vue` 快速创建详情页
- 使用 `components/SearchPage.vue` 快速创建搜索页

详细使用请参考：`references/page-templates.md`

### 8. 实现暗黑模式切换

我会实现完整的暗黑模式功能：

**实现方式：**

- 使用 `useTheme` composable 管理主题状态
- CSS 变量 + `data-theme` 属性切换
- localStorage 持久化主题选择
- 在"我的"页面添加主题切换开关

**支持的组件：**

- Vant 所有组件自动适配
- 自定义组件通过 CSS 变量适配
- 页面背景、卡片背景、文字颜色等

### 9. 配置路由过渡动画

我会配置流畅的页面切换动画：

**动画效果：**

- 前进：从右向左滑入（slide-left）
- 后退：从左向右滑出（slide-right）
- 支持自定义动画类型

**配置方式：**

- 在路由 meta 中配置 transition 字段
- 使用 Vue transition 组件
- CSS 动画实现

详细配置请参考：`references/router-configuration.md`

### 10. 配置 Mock 数据

我会创建移动端特有的 Mock 数据：

**Mock 文件：**

- `mock/user.ts`：用户登录、用户信息
- `mock/product.ts`：商品列表、商品详情

**数据特点：**

- 支持分页（page, pageSize）
- 包含 hasMore 字段（判断是否还有更多数据）
- 使用 Mock.js 生成随机数据
- 图片使用占位图

**响应格式：**

```typescript
{
  code: 200,
  data: { ... },
  message: 'success'
}
```

详细配置请参考：`references/mock-data-guide.md`

### 11. 生成项目说明

我会创建详细的 `README.md` 文档，包含：

- 项目介绍和技术栈
- 快速开始（安装、运行、构建）
- 项目结构说明
- 核心功能介绍
- 配置指南（主题、Tabbar、路由等）
- 页面模板使用说明
- Mock 数据说明
- 常见问题解答

### 12. 验证构建并启动项目

最后，我会执行以下步骤验证项目：

```bash
# 1. 安装依赖
npm install

# 2. 验证构建（确保没有错误）
npm run build

# 如果构建失败，修复问题后再次运行 npm run build，直到构建成功

# 3. 启动开发服务器
npm run dev
```

**验证内容：**

- 依赖安装成功
- TypeScript 编译无错误
- 构建成功
- 开发服务器正常启动
- 在浏览器移动端模式下测试功能

## 参考文档

生成项目后，你可以查看以下参考文档了解详细配置：

1. **theme-customization.md** - 主题定制指南
   - CSS 变量配置
   - Vant 主题配置
   - 暗黑模式实现

2. **tabbar-configuration.md** - 底部导航配置
   - Tabbar 路由配置
   - 图标选择
   - 徽标配置

3. **router-configuration.md** - 路由配置指南
   - 路由结构
   - 过渡动画
   - 路由守卫

4. **page-templates.md** - 页面模板使用指南
   - 列表页模板
   - 表单页模板
   - 详情页模板
   - 搜索页模板

5. **viewport-adaptation.md** - 视口适配指南
   - postcss-px-to-viewport 配置
   - 设计稿尺寸配置
   - 常见适配问题

6. **mock-data-guide.md** - Mock 数据指南
   - Mock 文件结构
   - 数据格式规范
   - Mock.js 使用

## 使用示例

### 示例 1：通过描述创建电商应用

**调用方式：**

```
/mobile-app-generator 创建一个电商移动端应用，底部导航包含首页、分类、购物车、我的，主题色用蓝色，需要暗黑模式
```

**生成结果：**

- 完整的电商移动端项目
- 4 个 Tabbar 页面（首页、分类、购物车、我的）
- 蓝色主题配色 #1989fa
- 暗黑模式切换功能
- 商品列表（下拉刷新+上拉加载）
- Mock 商品数据

### 示例 2：通过描述创建工具应用

**调用方式：**

```
/mobile-app-generator 创建一个工具类应用，底部有首页、工具、我的三个导航，主题色用绿色
```

**生成结果：**

- 完整的工具类移动端项目
- 3 个 Tabbar 页面（首页、工具、我的）
- 绿色主题配色 #07c160
- 工具页面包含常用工具图标
- 暗黑模式支持

### 示例 3：通过截图分析创建应用

**调用方式：**

```
/mobile-app-generator [上传淘宝/美团/微信等应用截图] 参考这个布局创建移动端应用
```

**分析过程：**

1. 识别底部 Tabbar 结构（有几个标签页）
2. 提取每个标签页的名称和功能
3. 分析主题配色方案
4. 识别页面布局风格
5. 确定是否使用暗色主题

**生成结果：**

- 根据截图自动配置 Tabbar 页面
- 匹配相似的主题配色
- 创建对应的页面结构
- 完整的可运行项目

### 示例 4：通过描述创建社交应用

**调用方式：**

```
/mobile-app-generator 创建一个社交应用，底部导航有首页、消息、发现、我的，主题色用微信绿 #07c160，支持暗黑模式
```

**生成结果：**

- 完整的社交类移动端项目
- 4 个 Tabbar 页面（首页、消息、发现、我的）
- 微信绿主题配色 #07c160
- 暗黑模式切换功能
- 动态列表和消息列表页面
- Mock 社交数据

### 示例 5：简单调用（会触发问答）

**调用方式：**

```
/mobile-app-generator
```

**交互流程：**

1. 系统询问应用类型（电商/社交/工具/自定义）
2. 系统询问主题颜色
3. 系统询问是否需要暗黑模式
4. 系统询问项目名称
5. 自动生成项目

## 技术特点

### 1. 移动端优化

- **Viewport 适配**：自动适配不同屏幕尺寸
- **触摸优化**：Vant 组件原生支持触摸交互
- **性能优化**：路由懒加载、图片懒加载
- **网络优化**：请求拦截、错误处理

### 2. 开发体验

- **TypeScript**：完整的类型支持
- **热更新**：Vite 快速热更新
- **Mock 数据**：无需后端即可开发
- **代码规范**：统一的代码风格

### 3. 用户体验

- **加载状态**：下拉刷新、上拉加载
- **空状态**：Empty 组件提示
- **错误处理**：Toast 提示
- **操作反馈**：Loading、Dialog 等

### 4. 可扩展性

- **组件复用**：页面模板快速创建页面
- **逻辑复用**：Composables 封装通用逻辑
- **样式复用**：CSS 变量统一管理
- **路由扩展**：灵活的路由配置

## 注意事项

1. **Node.js 版本**：建议使用 Node.js 16+ 版本
2. **浏览器兼容**：支持现代浏览器和移动端浏览器
3. **设计稿尺寸**：默认基于 375px 设计稿，可在 postcss.config.js 中修改
4. **Vant 版本**：使用 Vant 4.x 版本，支持 Vue 3
5. **Mock 数据**：生产环境需要替换为真实 API

## 常见问题

**Q: 如何修改主题颜色？** A: 修改 `src/styles/variables.css` 中的 CSS 变量，或在 `src/main.ts` 中配置 ConfigProvider。

**Q: 如何添加新的 Tabbar 页面？** A: 参考 `references/tabbar-configuration.md`，在路由配置中添加新页面，并设置 `meta.tabbar: true`。

**Q: 如何使用页面模板？** A: 参考 `references/page-templates.md`，导入对应的模板组件并传入配置。

**Q: 如何修改 Viewport 适配基准？** A: 修改 `postcss.config.js` 中的 `viewportWidth` 配置。

**Q: 如何禁用某些元素的 px 转换？** A: 在 `postcss.config.js` 的 `selectorBlackList` 中添加类名，或给元素添加 `.ignore` 类。

## 开始使用

**推荐方式：直接描述需求**

```
/mobile-app-generator 创建一个[应用类型]，底部导航有[页面1]、[页面2]、[页面3]，主题色用[颜色]
```

**示例：**

- `/mobile-app-generator 创建一个电商应用，底部有首页、分类、购物车、我的，主题色用蓝色`
- `/mobile-app-generator 创建一个工具应用，底部有首页、工具、我的，主题色用绿色`
- `/mobile-app-generator 创建一个社交应用，底部有首页、消息、发现、我的，主题色用微信绿`

**简单调用：**

如果你不确定如何描述，直接调用 `/mobile-app-generator`，我会通过问答方式收集信息。