# shangpinghui

**Repository Path**: GeSir_2325/shangpinghui

## Basic Information

- **Project Name**: shangpinghui
- **Description**: vue2.0 项目1
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-07
- **Last Updated**: 2022-10-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# shangpinghui

## Project setup

```
yarn install
```

### Compiles and hot-reloads for development

```
yarn serve
```

### Compiles and minifies for production

```
yarn build
```

### Lints and fixes files

```
yarn lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

### 第三方包的使用

#### nprogress 进度条

```js
import nprogress from "nprogress";
import 'nprogress/nprogress.css'
//请求拦截器中设置
nprogress.start()
//响应拦截器中设置
nprogress.done()
//自定义设置样式文件
//nprogress/nprogress.css->#nprogress .bar
```

#### lodash库的使用

1 lodash 函数库对外暴露_函数(如jquery中的$)  

```js
// lodash解决防抖
input.oninput=_.debounce(()=>{
  // 最后一个时间才触发该回调
  // do somesthing
},timer,obj)
// lodash解决节流
button.onclick=_.throttle(()=>{
  // 频繁触发变为少量触发
  // do somesthing
},timer,obj)
```  

#### mock.js(模拟)的使用

yarn add mockjs  

```js
import Mock from 'mockjs'
// Mock.mock(请求地址,模拟数据)
```

1 在src中创建mock文件夹  
2 准备json数据 mock文件夹中创建json文件 注意格式化 别保留空格
3 把mock数据需要的图片放置到public文件夹中 public文件夹在打包时会把相应的资源原封不动打包到dist文件夹中

### 知识点补充

#### less

less中的&表示选择父级

#### 事件触发的卡顿现象

正常：事件触发非常频繁时 每一次的触发 回调函数都要去执行 如果时间很短 而回调函数内部有计算 那么很肯出现浏览器卡顿
节流：哎规定的间隔时间范围内不会重复触发 只有大于这个时间间隔才会触发回调 把频繁触发变为少量触发（淘宝轮播图）
防抖：前面的所有的触发都被取消 最后一次执行在规定的事件之后才触发 也就是说如果连续快速的触发 只会执行一次 （输入框 用户快速 滑动引发的事件）

##### 项目性能优化

1 使用编程式导航替代编程式导航提升项目性能  
声明式导航创建组件过多而导致的性能下降问题
编程式导航用自定义属性根据$event选择相应的标签

##### json文件不用对外暴露可直接引入  

webpack 图片/json数据格式默认对外暴露

#### Swiper  

最完美的解决方法 配合watch侦听器与$nextTick去使用