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

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

（1）接口更新

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

（2）.Vuex

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

命令：npm install --save vuex@3

state:仓库存储数据

mutations:修改 state

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

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

让大的模块包含小的模块

modules: {

home,

}

（3）防抖和节流：控制浏览器卡顿现象

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

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

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

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

可以引入 lodash 或者 npm i 下载

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<script>区域最完美的解决方案是：watch+nextTick

$nextTick:在DOM更新前面，循环结束之后，执行延迟回调。修改数据之后，使用这个方法，获取更新后的DOM。可以保证页面结构存在。

（6）获取Floor数据

* 在这里不可以直接给flooe/index传递，要通过home进行父子通信。

* 组件通信方式有哪些？【面试题目】

props：父=>子通信

自定义事件：@on @emit 可以实现子给父

全局总线事件：$bus

pubsub-js:vue中几乎不用，全能

插槽

vuex

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

尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
教学视频:https://www.bilibili.com/video/BV1Vf4y1T7bw 不回要资料的评论,资料在视频底下评论有些仓库里面有. 试图自行解决问题也是程序员必备技能之一,多做尝试 ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
尚品汇项目笔记（持续更新中）
项目网络教学视频链接:尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录一. 使用vue-cli脚手架去初始化项目二.项目的其他配置三.项目路由分析四.创建 ...
尚硅谷VUE课程的页签图标问题
项目场景:尚硅谷VUE课程的页签图标问题问题描述: 在没有添加页签图标favicon.icon时不报错. 解决方案: 给VScode添加Live Server插件,并右键选择open with Li ...
尚硅谷Vue技术全家桶（1）
尚硅谷Vue技术全家桶课程来源于b站尚硅谷教程:一套搞定Vue技术全家桶,轻松拿捏vue3.0(vue.js全网最新) 课程简介在这个vue2到vue3的过渡时期,需要兼顾2.x和3版本.尚硅谷的 ...
尚硅谷 java基础第二个项目之客户关系管理系统
尚硅谷 java基础第二个项目之客户关系管理系统. 做了一些完善,增加性别,电话,邮箱有效性验证.其中电话和邮箱验证直接"饮用"了网友的果汁. 在此感谢各位原著大佬们的分享. 具体 ...
尚硅谷-云尚办公-项目复盘
尚硅谷-云尚办公-项目复盘资料地址本文介绍问题汇总问题1.knife4j无法下载视频4 问题2.dev等含义视频5 问题3.wrapper继承/实现图视频8 问题4.修改统一返回结果视 ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
Vue 3.0 企业级项目实战
目录小册介绍 Vue 3.0 + Element Plus + Spring Boot 前后端分离实践,你不能错过! 小册须知你会学到什么? 适宜人群作者介绍小册介绍基于真实项目的实战开发, ...

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

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

最新文章

热门文章