尚硅谷 VUE 尚品汇项目实战问题解决方式整理

最近在自学大型vue项目,选中了尚硅谷的尚品汇,之前也学习过黑马程序员的一个电商后台管理项目,因为项目打包优化时候出了Bug,就闲置了,但是代码是一行一行敲完啦,也放到了码云上!学完这个尚品汇准备下一个挑战小程序,暑期可以准备毕设/实习,下面可以是我自己的记录,日日新!

(1)接口更新

http://gmall-h5-api.atguigu.cn/api:最新接口噢

尚硅谷 VUE 尚品汇项目实战问题解决方式整理_第1张图片

(2).Vuex

vuex 是一个官方插件,状态管理库,集中式管理项目中组件公用的数据,大项目需要它,小项目可以不需要。

命令:npm install --save vuex@3

尚硅谷 VUE 尚品汇项目实战问题解决方式整理_第2张图片

state:仓库存储数据

mutations:修改 state

actions:处理 action,书写自己业务逻辑,处理异步

getters:简化仓库数据,让组件获取仓库数据更方便

让大的模块包含小的模块

modules: {

home,

search

}

尚硅谷 VUE 尚品汇项目实战问题解决方式整理_第3张图片

(3)防抖和节流:控制浏览器卡顿现象

节流:在规定的间隔范围内不会重复发回调,只有大于这个时间间隔才会触发回调,把频率触发变为少量触发。用户操作很频繁,但是把频繁的操作变为少量操作【给浏览器充裕时间解析代码】

防抖:前面的所有触发都被取消,最后一次执行在规定的时间之后才会触发,如果连续触发,只会执行一次。用户操作很频繁,但是只执行一次。

本项目运用节流方法,控制浏览器卡顿

lodash:封装了节流、防抖业务【闭包+延迟器】

可以引入 lodash 或者 npm  i  下载

尚硅谷 VUE 尚品汇项目实战问题解决方式整理_第4张图片

mudule里面有lodash,可以直接按需引入

import throttle from 'lodash/throttle' 

(4)mockjs模拟数据

要用 mock[模拟数据],用插件 mockjs[生成随机数据,拦截 Ajax 请求]

1、提供假数据;

2、在 mock 文件夹中准备 json 文件,一定要格式化一下;

mock 图片放到 public 文件夹!因为打包的时候,public 会被放到 dist

3、 开始 mock,创建 mockjs 模块:mockServe.js,通过 mockjs 插件实现

[不需要对外暴露:图片、json]

4、使用mock

// 第一个参数请求地址,第二个参数:请求数据

Mock.mock('mock/banner', { code: 200, data: banner })

Mock.mock('mock/floor', { code: 200, data: floor })

5、mockServe.js 在入口文件[main.js]引入

import '@/mock/mockServe'

6、在 api 中增加 mockAjax.js

修改 baseURL: '/mock',

其次在 ap/index.js 中添加一条指向 mockAjax.js 的路径

import mockRequests from './mockAjax.js'

export const reqBannerList = () => mockRequests.get('/banner')

在 pages/home/listcontainer/index,派发 action:通知 vue 派发 ajax 请求,将数据存在仓库

在 api/index.js

导入 import mockRequests from './mockAjax.js'

(5)swiper轮播图

* swiper插件:制作轮播图,pc/移动

* 使用步骤:

1、引入依赖包(vue2 用 5 一下版本)

2、页面中的结构务必要有

3、初始化Swiper,添加动态效果

4

你可能感兴趣的:(自学,vue.js,前端,javascript)