Day 4

1 开发Search 模块中的 TypeNav 商品分类菜单（含有过渡动画）

过度动画：前提组件 | 元素无比要有 v-if | v-show 指令才可以进行过度动画

2 现在商品分类三级分类列表可以优化？

在App 根组件当中发请求【根组件mounted】执行一次

3 合并 param 与 query 参数？

4 开发 Home 首页当中的 ListContainer 组件与 Floor 组件？

但是这里需要知道一件事情： 服务器返回的数据（接口）只有商品分类菜单分类数据，对于 ListContainer组件与Floor 组件数据服务器没有提供的。

mock数据（模拟）：如果你想mock数据，需要用到一个插件 mockjs

npm install --save mockjs

使用步骤：

（1）在项目当中src文件夹中创建mock 文件夹

（2）第二步准备JSON数据（mock文件夹中创建相应的JSON文件） -- 格式化一下，别留有空格（跑不起来的）

（3）把 mock 数据需要的图片放置到 public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹中】

（4）创建mockServer.js 通过mockjs插件实现模拟数据

（5）mockServer.js 文件在入口文件中引入（至少需要执行一次，才能模拟数据）

5 ListContainer 组件开发重点？

安装 Swiper 插件：最新版本 6，安装 swiper@5

npm install --save swiper@5

复习

（1）完成商品分类的三级列表路由跳转一级路由参数（合并参数）

（2）完成search 模块中对 typeNav使用（过渡动画）

（3）对于 typeNav 请求次数也进行优化

（4）swiper 插件

swiper插件：经常制作轮播图（移动端 | PC 端）

（5）mock 数据，通过 mockjs 模块实现的