# omniProject

**Repository Path**: ChenYuLong6/omni-project

## Basic Information

- **Project Name**: omniProject
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-03
- **Last Updated**: 2025-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 多端适配项目

基于 Vue3 + TypeScript + Vite 构建的多端适配项目，支持 H5 端和 Web 端，自动识别设备类型并提供相应的UI

## 特性

- 🚀 Vue3 + TypeScript + Vite
- 📱 自动识别设备类型，适配 H5/Web 端
- 🎨 H5 端使用 Vant UI，Web 端使用 Element Plus
- 📦 基于 Pinia 的状态管理
- 🔧 ESLint + Prettier 代码规范
- 🎯 Husky + lint-staged 提交规范
- 📝 完善的 TypeScript 类型定义
- 🛠️ 常用工具函数封装
- 🌐 Axios 请求封装
- 📊 自动 px 转 vw（H5端）

## 快速开始

### 环境要求

- Node.js >= 16
- npm >= 7

### 安装依赖

```bash
npm install
```

### 开发

```bash
npm run dev
```

### 构建

```bash
npm run build
```

### 代码格式化

```bash
npm run format
```

### 代码检查

```bash
npm run lint
```

## 项目结构

```
├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 公共组件
│   ├── layouts/         # 布局组件
│   │   ├── h5/         # H5端布局
│   │   └── web/        # Web端布局
│   ├── plugins/         # 插件配置
│   ├── router/         # 路由配置
│   ├── stores/         # 状态管理
│   ├── styles/         # 样式文件
│   │   ├── modules/    # 模块样式
│   │   └── variables.scss  # 变量配置
│   ├── types/          # 类型定义
│   ├── utils/          # 工具函数
│   └── views/          # 页面组件
│       ├── h5/         # H5端页面
│       └── web/        # Web端页面
├── .env               # 环境变量
├── .eslintrc.cjs     # ESLint 配置
├── .prettierrc       # Prettier 配置
├── postcss.config.cjs # PostCSS 配置
├── tsconfig.json     # TypeScript 配置
└── vite.config.ts    # Vite 配置
```

## 开发指南

### 新增页面

1. 在对应端的 \`views\` 目录创建页面组件
2. 在对应的路由文件添加配置
3. 在布局组件中添加导航（如需要）

### 样式开发

- H5 端样式会自动转换为 vw 单位（基准宽度 375px）
- Web 端样式保持 px 单位不变
- 公共样式变量在 \`variables.scss\` 中定义
- 使用 \`@use\` 引入样式模块

### 工具函数

项目提供了常用的工具函数：

- \`debounce\`: 防抖函数
- \`throttle\`: 节流函数
- \`formatDate\`: 日期格式化
- \`storage\`: 本地存储封装

### 状态管理

使用 Pinia 进行状态管理：

```typescript
// 使用示例
import { useAppStore } from '@/stores/app';

const appStore = useAppStore();
appStore.setTheme({ primaryColor: '#ff0000' });
```

### HTTP 请求

使用封装的 Axios 实例：

```typescript
import request from '@/utils/request';

// GET 请求
const getData = () => request.get('/api/data');

// POST 请求
const postData = (data) => request.post('/api/data', data);
```

## 多端适配说明

### H5 端

- 使用 Vant UI 组件库
- px 自动转换为 vw 单位
- 基准宽度 375px
- 适配移动端事件和交互

### Web 端

- 使用 Element Plus 组件库
- 保持 px 单位不变
- 最小宽度 1200px
- 适配桌面端交互

## 部署

### 开发环境

```bash
npm run dev
```

### 生产环境

```bash
npm run build
```

构建产物将生成在 \`dist\` 目录下。