# mini2.0 项目说明

## 项目概述

基于 Vue 3 + TypeScript + Vant 的移动端混合应用模板，已集成敏行原生桥接 API。

## 技术栈

| 技术 | 版本 | 用途 |
|------|------|------|
| Vue 3 | ^3.5 | 前端框架 |
| TypeScript | ^6.0 | 类型检查 |
| Vite | ^8.0 | 构建工具 |
| Vant | ^4.9 | 移动端 UI 组件库 |
| Pinia | ^3.0 | 状态管理 |
| Vue Router | ^5.0 | 路由管理 |
| Axios | ^1.16 | HTTP 客户端 |

## 目录结构

```
mini2.0/
├── src/
│   ├── core/
│   │   └── mxApi/
│   │       └── index.ts          # 原生桥接 API
│   ├── api/                      # API 接口定义
│   ├── config/
│   │   └── env.ts                # 环境配置
│   ├── router/                   # 路由配置
│   ├── stores/                   # Pinia 状态管理
│   ├── types/                    # TypeScript 类型定义
│   ├── utils/
│   │   └── request.ts            # axios 封装
│   ├── views/                    # 页面视图
│   ├── App.vue                   # 根组件
│   └── main.ts                   # 入口文件
├── docs/
│   └── MX_API.md                 # 原生 API 文档
├── vite.config.ts                # Vite 配置
└── package.json
```

## 两种 HTTP 请求方案

### 1. axios（默认，浏览器环境）

```typescript
import { request } from '@/utils/request'

const res = await request({
  url: '/api/users',
  method: 'GET',
  params: { page: 1 }
})
```

### 2. 原生 AJAX（绕过跨域）

```typescript
import { ajaxGet } from '@/core/mxApi'

const { data } = await ajaxGet('/api/users', { page: 1 })
```

## 智能切换示例

```typescript
import { isNativeApp, ajaxGet as nativeGet } from '@/core/mxApi'
import { request } from '@/utils/request'

export async function fetchUsers(page: number) {
  if (isNativeApp()) {
    return (await nativeGet('/api/users', { page })).data
  } else {
    return (await request({ url: '/api/users', params: { page } })).data
  }
}
```

## 开发命令

```bash
# 开发环境（连接本地 OMS）
npm run dev

# 六个环境的构建命令
npm run build:earth2sit
npm run build:test
npm run build:sit
npm run build:uat
npm run build:pvt
npm run build:prod

# 类型检查
npm run type-check

# 代码检查
npm run lint
```

## 环境变量配置

本地开发使用 `.env.dev`；EARTH2SIT 环境打包使用 `.env.earth2sit`，TEST 环境打包使用 `.env.test`，其他环境打包使用 `.env.sit`、`.env.uat`、`.env.pvt`、`.env.prod`：

```bash
# API 基础地址
VITE_API_BASE_URL=/api

# API 超时时间（毫秒）
VITE_API_TIMEOUT=10000

# 代理目标（开发环境）
VITE_PROXY_TARGET=http://localhost:3030

# 应用环境（按文件分别设置为 DEV、TEST、SIT、UAT、PVT、PROD）
VITE_APP_ENV=DEV
```

## 原生 API 使用

详见 [MX_API.md](./MX_API.md)

```typescript
import {
  hideWebViewTitle,
  getCurrentUser,
  MXSelectUsers,
  isNativeApp
} from '@/core/mxApi'

// 检测环境
if (isNativeApp()) {
  // 获取用户
  const user = await getCurrentUser()

  // 选人
  const users = await MXSelectUsers()
}
```

## Vant 组件使用

自动导入，无需手动引入：

```vue
<template>
  <van-button type="primary" @click="handleClick">按钮</van-button>
  <van-cell title="标题" value="内容" />
</template>

<script setup lang="ts">
// showToast 已自动导入
const handleClick = () => {
  showToast('Hello')
}
</script>
```

## 构建产物

```bash
npm run build:prod

# Web 资源输出到 dist/www
# ZIP 按环境输出，例如 PROD 包位于 dist/PROD/
# 部署到敏行 App 的资源目录即可
```

## 注意事项

1. **原生 API 集成**：`src/core/mxApi/index.ts` 是核心，已适配 TypeScript
2. **自动导入**：Vant 组件和 Vue API 已配置自动导入
3. **移动端适配**：使用 postcss-px-to-viewport 插件
4. **环境变量**：所有配置通过 `.env` 文件管理

## 下一步

1. 根据业务需求创建页面（`src/views/`）
2. 定义 API 接口（`src/api/`）
3. 配置路由（`src/router/`）
4. 创建状态管理（`src/stores/`）