# Uni-Shop 电商应用

Uni-Shop 是一个基于 uni-app 开发的跨平台电商应用，支持多端部署（微信小程序、H5、App等）。该项目实现了完整的电商功能，包括商品浏览、分类查询、购物车、订单管理、用户中心等核心功能。

## 项目特点

- 基于 uni-app 框架开发，实现一次开发，多端部署
- 使用 Vue 3 + TypeScript 开发，提供类型安全和更好的开发体验
- 采用 Pinia 进行状态管理，支持数据持久化
- 组件化开发，提高代码复用性和可维护性
- 完整的电商业务流程实现

## 技术栈

- **前端框架**：uni-app、Vue 3
- **开发语言**：TypeScript
- **状态管理**：Pinia + pinia-plugin-persistedstate（持久化）
- **UI组件**：uni-ui
- **CSS预处理器**：SCSS
- **构建工具**：Vite
- **代码规范**：ESLint + Prettier
- **Git Hook**：husky + lint-staged

## 项目结构

```
uni-shop/
├── src/                       # 源代码目录
│   ├── components/            # 全局公共组件
│   ├── composables/           # 组合式函数
│   ├── pages/                 # 主包页面
│   │   ├── index/             # 首页
│   │   ├── category/          # 分类页
│   │   ├── cart/              # 购物车
│   │   ├── my/                # 个人中心
│   │   ├── goods/             # 商品详情
│   │   ├── hot/               # 热门推荐
│   │   └── login/             # 登录页
│   ├── pagesMember/           # 会员分包（个人信息、地址管理等）
│   ├── pagesOrder/            # 订单分包（订单创建、详情、支付等）
│   ├── services/              # API 服务
│   ├── stores/                # Pinia 状态管理
│   │   ├── modules/           # 状态模块
│   │   └── index.ts           # Pinia 入口
│   ├── styles/                # 全局样式
│   ├── types/                 # TypeScript 类型定义
│   ├── utils/                 # 工具函数
│   │   └── http.ts            # 网络请求封装
│   ├── App.vue                # 应用入口组件
│   ├── main.ts                # 应用入口文件
│   ├── pages.json             # 页面路由配置
│   └── manifest.json          # 应用配置
├── static/                    # 静态资源
│   └── tabs/                  # 底部导航图标
├── .eslintrc.js               # ESLint 配置
├── .gitignore                 # Git 忽略文件
├── .prettierrc.json           # Prettier 配置
├── index.html                 # HTML 模板
├── package.json               # 项目依赖
├── tsconfig.json              # TypeScript 配置
└── vite.config.ts             # Vite 配置
```

## 功能模块

### 1. 首页

- 轮播图展示
- 商品分类导航
- 热门商品推荐
- 猜你喜欢（无限滚动加载）

### 2. 分类

- 分类导航
- 分类商品展示

### 3. 商品详情

- 商品信息展示
- 规格选择
- 加入购物车
- 立即购买

### 4. 购物车

- 商品列表
- 商品选择
- 数量修改
- 结算功能

### 5. 个人中心

- 用户信息展示
- 订单管理
- 地址管理
- 设置

### 6. 订单

- 订单创建
- 订单列表
- 订单详情
- 支付功能

## 开发规范

### 命名规范

- 文件夹和文件名：使用小写字母和连字符（kebab-case）
- 组件名：使用 PascalCase
- 变量和函数：使用 camelCase
- 常量：使用 UPPER_SNAKE_CASE

### 代码风格

- 使用 ESLint 和 Prettier 进行代码格式化
- 提交前自动进行代码检查（通过 husky 和 lint-staged）

### 组件开发规范

- 组件文件使用 .vue 扩展名
- 组件使用 `<script setup>` 语法
- 自定义组件以 Jbc 开头（通过 easycom 自动注册）

### API 请求规范

- 所有 API 请求统一通过 services 目录下的模块进行管理
- API 函数命名规则：动词 + 模块名 + API 后缀（如 getGoodsAPI）
- 使用 TypeScript 类型定义请求参数和响应数据

## 运行项目

### 环境要求

- Node.js >= 22.0.0
- pnpm >= 10.0.0

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
# H5
pnpm run dev:h5

# 微信小程序
pnpm run dev:mp-weixin

# 其他平台
pnpm run dev:custom
```

### 打包构建

```bash
# H5
pnpm run build:h5

# 微信小程序
pnpm run build:mp-weixin

# 其他平台
pnpm run build:custom
```

## 项目亮点

1. **TypeScript 支持**：全面使用 TypeScript 进行开发，提供类型安全
2. **组合式 API**：使用 Vue 3 的组合式 API 进行开发，提高代码复用性
3. **自定义请求库**：封装了基于 uni.request 的请求库，支持拦截器和错误处理
4. **状态持久化**：使用 pinia-plugin-persistedstate 实现状态持久化
5. **分包加载**：采用分包策略优化小程序加载性能
6. **自定义组件**：开发了多个可复用的业务组件