# 尚品汇

**Repository Path**: xyyfun/sph

## Basic Information

- **Project Name**: 尚品汇
- **Description**: 基于Vue2项目开发的电商类项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-21
- **Last Updated**: 2023-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# 项目使用环境

- vue-cli 脚手架
- vuex 状态管理库
- vue-router 路由管理
- axios 网络请求
- nprogress 进度条插件
- Element-UI 第三方组件使用
- UUID 生成唯一 id(作为游客临时身份)

# api 文件夹

用于存放 axios 请求
request.js 文件 axios 二次封装

# 解决跨域问题

vue.config.js 文件内配置 devServer 代理

# 项目路由组件-pages

- Home 主页组件
- Search 搜索组件
- Login 登录组件
- Register 注册组件
- Center 我的订单组件
- Detail 商品详情组件
- Pay 支付组件
- PaySuccess 支付成功组件
- ShoppingCart 购物车组件
- Trade 提交订单组件

# 项目非路由组件-components

- Header 头部组件
- Footer 底部详情组件
- Pagination 分页器组件
- TypeNav 全局三级联动组件
  ## TypeNav 组件细节及优化
  1. 在 TypeNav 组件中向服务器发请求移入到 App 组件中(根组件 mounted 只执行一次) 节省性能资源
  2. 添加过渡动画及节流 提高用户体验
  3. 三级联动内 a 标签路由跳转使用事件委托+编程式路由导航 避免所有 a 标签添加路由跳转 节省性能资源
  4. 项目中显示与隐藏效果使用 v-show 节省性能资源

# nprogress 插件

发送网络请求进度条效果 实现数据可视化
npm 下载
npm install --save nprogress
start 开始进度条
done 结束进度条

# vuex 状态管理库

使用 Vuex 实现模块式开发

# 使用 mock 插件实现数据模拟

创建 mockServe.js 文件 通过 mock 模拟数据
JSON 数据格式默认向外暴露