# uniapp-trae

**Repository Path**: hu-pengll/uniapp-trae

## Basic Information

- **Project Name**: uniapp-trae
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-28
- **Last Updated**: 2025-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp Trae - 多端应用项目

基于 UniApp + Vue3 + TypeScript + uView Plus 构建的多端应用项目模板。

## 🚀 技术栈

- **框架**: UniApp 3.0+ (分文件开发模式)
- **前端**: Vue 3 + Composition API + `<script setup>`
- **构建工具**: Vite
- **UI 组件库**: uView Plus (最新稳定版)
- **状态管理**: Pinia
- **类型系统**: TypeScript
- **样式预处理器**: SCSS

## 📱 支持平台

- ✅ H5
- ✅ 微信小程序
- ✅ App (Android + iOS)

## 📁 项目结构

```
uniapp-trae/
├── src/                          # 源代码目录
│   ├── pages/                    # 页面目录
│   │   └── index/                # 首页（分文件开发模式）
│   │       ├── index.html        # 页面模板
│   │       ├── index.scss        # 页面样式
│   │       ├── index.ts          # 页面逻辑
│   │       └── index.json        # 页面配置
│   ├── components/               # 公共组件
│   ├── stores/                   # Pinia 状态管理
│   │   ├── app.ts               # 应用状态
│   │   └── index.ts             # 统一导出
│   ├── api/                     # API 接口
│   │   ├── request.ts           # 请求封装
│   │   └── index.ts             # API 统一导出
│   ├── utils/                   # 工具函数
│   │   └── index.ts             # 工具函数集合
│   ├── app.ts                   # 应用入口逻辑
│   ├── app.scss                 # 全局样式
│   ├── main.ts                  # 应用主入口
│   ├── pages.json               # 页面配置文件
│   └── manifest.json            # 应用配置文件
├── uni_modules/                 # uni 模块目录
├── vite.config.ts               # Vite 配置
├── tsconfig.json                # TypeScript 配置
├── package.json                 # 项目依赖
└── README.md                    # 项目说明
```

## 🛠️ 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 开发环境运行

#### H5 开发
```bash
npm run dev:h5
```

#### 微信小程序开发
```bash
npm run dev:mp-weixin
```

#### App 开发
```bash
npm run dev:app
```

### 3. 生产环境构建

#### H5 构建
```bash
npm run build:h5
```

#### 微信小程序构建
```bash
npm run build:mp-weixin
```

#### App 构建
```bash
npm run build:app
```

#### 全平台构建
```bash
npm run build:all
```

## 🔧 核心特性

### 分文件开发模式
项目采用 UniApp 2024+ 新增的分文件开发模式：
- `xxx.html` - 页面结构文件
- `xxx.scss` - 页面样式文件  
- `xxx.ts` - 页面逻辑文件
- `xxx.json` - 页面配置文件

### 网络请求封装
基于 `uni.request` 二次封装，支持：
- ✅ Token 自动携带
- ✅ 401 自动跳转登录（兼容微信小程序）
- ✅ 若依 RuoYi-Vue 接口规范
- ✅ 全局错误处理
- ✅ 文件上传支持

### uView Plus 自动引入
通过 `unplugin-vue-components` 实现 uView Plus 组件自动引入，无需手动导入。

### TypeScript 支持
完整的 TypeScript 配置，包含类型定义和自动导入。

## 📋 功能列表

### 已完成功能
- [x] 项目基础架构搭建
- [x] Vue 3 + TypeScript 配置
- [x] uView Plus 集成与自动引入
- [x] Pinia 状态管理
- [x] 网络请求封装
- [x] 示例首页（包含用户信息、功能网格、数据统计等）
- [x] 多平台构建配置
- [x] 工具函数集合

### 待开发功能
- [ ] 用户登录/注册页面
- [ ] 更多示例页面
- [ ] 路由配置（H5）
- [ ] 权限管理
- [ ] 主题切换
- [ ] 国际化支持

## ⚙️ 配置说明

### Vite 配置 (`vite.config.ts`)
- 别名配置：`@` → `src`
- uView Plus 自动引入
- SCSS 全局变量注入
- 多平台构建支持

### TypeScript 配置 (`tsconfig.json`)
- 严格模式启用
- 路径映射配置
- Vue 3 类型支持

### 应用配置 (`src/manifest.json`)
- 多平台配置
- 权限配置
- 版本信息

## 🎯 开发规范

### 代码规范
- 使用 TypeScript 严格模式
- 遵循 Vue 3 组合式 API 最佳实践
- 组件命名使用 PascalCase
- 工具函数使用 camelCase

### 文件命名
- 页面文件：`kebab-case` (如：`user-profile`)
- 组件文件：`PascalCase` (如：`UserAvatar`)
- 工具文件：`camelCase` (如：`formatDate`)

### Git 提交规范
- feat: 新功能
- fix: 修复问题
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
- test: 测试相关
- chore: 构建过程或辅助工具变动

## 🔗 相关链接

- [UniApp 官方文档](https://uniapp.dcloud.net.cn/)
- [Vue 3 官方文档](https://v3.vuejs.org/)
- [uView Plus 文档](https://uiadmin.net/uview-plus/)
- [TypeScript 官方文档](https://www.typescriptlang.org/)

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

**注意**: 本项目使用 Node.js 22 环境，请确保您的开发环境兼容。