1 swiper pc|移动的轮播图

1.1 第一种方式延时器

ListContainer开发重点：安装swiper插件，版本5
–1：引入包
–2：页面结构有
–3：new swiper实例

1.2 第二种方式

watch+nextTick:
nextTick:将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它
经常与其他插件混合使用：

   watch: {
  // 监听bannerList数据的变化
  bannerList: {
    handler(newValue, oldValue) {
      // 现在通过watch监听bannerList数据的变化
      // 如果执行hander方法，代表组件实例身上的这个属性已经有了
      // 当前这个函数执行，只能保证bannerList数据有了，但是没有办法保证v-for已经执行了
      // v-for执行完毕，才有了结构，但是在这里没有办法保证v-for执行完毕
      // 所以需要nextTick：将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它
      this.$nextTick(() => {
        var mySwiper = new Swiper("#mySwiper", {
          //   direction: "vertical", // 垂直切换选项
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      });
    },
  },
},

2 开发floor组件轮播图

2.1 getFloorList在仓库中和api中获取数据三连环（state）

2.2 在自定义组件中也可以使用v-for，遍历floor组件

2.3 组件通信

props：父给子组件通信
自定义事件：@on，@emit 子给父组件
全局事件总线：$bus 全能
pubsub-js：vue中几乎不用，全能
插槽

渲染floor组件数据

3 把首页轮播图封装为全局组件，注册一次，随便用

注意进入的数据以及统一性！
开发时看到类似的组件在很多地方使用，可以将其封装为全局组件

4 search模块的开发。

1：静态页面+静态组件拆分出来
2：发请求（API）
3：Vuex
4：组件获取仓库数据，动态展示数据

通过getters + mapGetters简化数据，

带给服务器的参数置空，还是会把相应的字段带给参数里面，但是把他置空，那就不会在参数中带给服务器

5动态开发面包屑的分类名

编程式导航路由跳转，自己跳自己

5.1 动态开发面包屑的关键字，

当面包屑中的关键字清除后，需要将header中的关键字置空

组件通信：
props：父子
自定义事件：子父
vuex：万能
插槽：父子
pubsub-js：万能
$bus：万能

keyword 采用 $bus
属性，品牌采用自定义事件$emit