# shangpinhui_front_end

**Repository Path**: Gitee-ZR/shangpinhui_front_end

## Basic Information

- **Project Name**: shangpinhui_front_end
- **Description**: 前端项目练手
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-19
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 电商项目说明文档

## 项目简介
这是一个基于 Vue 的电商平台前端项目，涵盖了首页、商品搜索、购物车、用户中心等核心模块。项目使用 Vue 全家桶（Vue Router、Vuex）进行开发，并结合 Axios、Mock.js、Swiper 等工具实现功能和交互。

---

## 技术栈
- **框架**：Vue 2.x / Vue Router / Vuex
- **构建工具**：Webpack / Vue CLI
- **HTTP 请求**：Axios
- **状态管理**：Vuex
- **UI 组件**：Swiper、自定义组件
- **Mock 数据**：Mock.js
- **其他工具**：NProgress（加载进度条）、Lodash（防抖节流）

---

## 项目结构
```
src/
├── api/                # 接口请求封装
├── components/           # 公共组件（Header、Footer、Pagination）
├── mock/                 # Mock 数据配置
├── pages/                # 页面组件（Home、Search、Login、Register）
├── store/                # Vuex 状态管理模块
├── router/               # Vue Router 路由配置
├── assets/               # 静态资源（图片）
├── App.vue               # 根组件
└── main.js               # 入口文件
```

---

## 功能模块

### 首页（Home）
- 轮播图（Swiper）
- 商品推荐（Recommend）
- 热门排行（Rank）
- 品牌展示（Brand）
- 分类导航（TypeNav）
- 楼层展示（Floor）

### 搜索页（Search）
- 搜索条件筛选（SearchSelector）
- 商品列表展示
- 排序功能（价格、销量等）
- 分页器（Pagination）

### 购物车（Cart）
- 商品数量修改
- 商品删除
- 多选操作
- 购物车状态同步

### 用户模块
- 注册 / 登录
- 个人中心
- 交易模块

---

## 核心功能实现

### 路由管理
- 使用 `Vue Router` 实现页面跳转
- 支持 `query` 和 `params` 传参
- 解决重复 push 路由问题
- 路由懒加载优化性能

### 状态管理（Vuex）
- 使用 `Vuex` 管理首页、搜索页、购物车数据
- 使用 `getters` 提取派生数据
- 模块化拆分（home.js、search.js）

### 接口封装
- 使用 `Axios` 封装统一请求服务
- 使用 `Mock.js` 模拟后端接口数据
- 配置代理解决跨域问题

### 性能优化
- 图片懒加载
- 防抖与节流（Lodash）
- 组件复用与缓存
- 路由懒加载

---

## 开发指南

### 安装依赖
```bash
npm install
```

### 启动项目
```bash
npm run serve
```

### 构建项目
```bash
npm run build
```

### 配置说明
- 修改 `vue.config.js` 可配置代理、打包路径等
- 修改 `jsconfig.json` 配置路径别名（`@` 代表 `src`）

---

## 第三方插件使用
| 插件名       | 用途说明             |
|--------------|----------------------|
| Swiper       | 实现轮播图           |
| Axios        | HTTP 请求封装        |
| Mock.js      | 模拟后端接口         |
| NProgress    | 页面加载进度条       |
| Lodash       | 防抖、节流等工具函数 |
| Vuex         | 状态管理             |
| Vue Router   | 路由跳转与管理       |

---

## 注意事项
- 所有图片资源存放在 `public/images` 或 `src/assets`
- 接口请求统一在 `src/api` 中封装
- Mock 数据配置在 `src/mock` 目录
- Vuex 模块按功能拆分存放于 `src/store`

---

## 贡献指南
欢迎提交 Issue 和 Pull Request，贡献代码请遵循以下规范：
- 提交前确保代码格式化（ESLint）
- 提交信息清晰描述修改内容
- 保持组件单一职责原则
- 提交前测试核心功能

---

## 协议
本项目采用 MIT License，请在使用时保留原始版权信息。