179 lines
5.0 KiB
Markdown
179 lines
5.0 KiB
Markdown
# 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. **自定义组件**：开发了多个可复用的业务组件
|