moke、动态图片资源打包显示

moke

使用mockjs来模拟数据接口（其实和ajax差不多，mock其实就是给我们的json数据指定一个url路径去做请求）
    1、准备json数据
    2、安装mockjs
    3、使用mockjs来模拟提供接口地址
    4、在main中引入mockServer.js
    5、在ajax当中修改Ajax中的baseUrl 为 /mock  变为一个新的文件 mockAjax
    mock会拦截我们的ajax请求，不会真正去发送请求。（发送请求是往本地发的，没有往后端发，请求的数据也是本地的）

动态图片资源打包显示 

如果是静态页面，div和img都是存在的，webpack在打包的时候就会把div和img进行打包

并且会根据img的src找到对应的静态资源图片一起打包，所以不会出问题

如果是动态页面，div和img都是根据请求回来的动态数据进行遍历产生的，也就是说webpack在

打包的时候，div和img不存在，因此打包完成后，图片根本没有被打包的指定位置，所以我们需要

自己把需要的静态图片资源，给放到打包后位置，其实就是开发阶段publick当中

实现页面轮播

swiper的用法参考官方网站
    1、安装 5版本
    2、引入js和css   可以查看页面结构是否正常，正常就代表css没问题
    3、书写swiper的结构    早早都已经写完了

    4、实例化swiper实例对象

    注意：swiper必须在页面的数据结构显示完成后创建才会生效

（1）解决swiper影响多个页面的bug

    通过选择器可以指定哪个地方需要，但是不好
    通过ref最好
    

（2）swiper创建的时间应该是在页面列表创建之后才会有效果
    静态页面是没问题的，静态页面不需要等待数据，因此monted完全可以去创建swiper

    现在我们的数据是动态的，monted内部去创建，数据还没更新到界面上，因此无效

静态页面不会出问题，因为new的时候结构本身就形成，

如果是动态页面，结构是根据动态数据渲染的，此时new Swiper一定要等待页面结构完全形成之后再去new

否则new的太早，不生效

直接在mounted去实例化，数据也是在这发请求的，new swiper比数据回来还早，证明结构一定没形成

解决办法：

第一种解决方案：

        加定时器，延迟一段事件再去new，但是体验不好

 第二种解决方案

        放在updated当中,也不行，效率比较低，因为updated是说的页面数据更新完成

       组件当中任何一个数据修改，updated都要去执行，后续会多次重复的去new

第三种解决方案 

    watch监视 + nextTick    
    Vue.nextTick 和 vm.$nextTick 效果一样
    nextTick是在最近的一次更新dom之后会立即调用传入nextTick的回调函数

watch: {
    bannerList: {
      immediate:true,
      handler() {
       // 代表数据回来了,但是直接去实例化，还是不行，因为数据虽然回来了，但是页面还没更新完成
       // 我们既要保证数据回来了，还要保证页面也更新完成了，再去实例化
       // this.$nextTick保证页面更新完成
       // 等待页面最近一次更新完成,执行操作
          
      //  nextTick一般用在，当数据更新后引起页面更新，而页面刚更新完，我们需要写自己的逻辑
      // 此时这些逻辑就写在nextTick的回调当中
 
 
         this.$nextTick(() => {
           new Swiper(this.$refs.bannerSwiper, {
             // direction: 'vertical', // 垂直切换选项
             loop: true, // 循环模式选项
            autoplay:true,
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
             },
 
           // 如果需要前进后退按钮
            navigation: {
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
            },
 
            // 如果需要滚动条
            // scrollbar: {
           //   el: '.swiper-scrollbar',
            // },
          })
       })
       }
    }
  },

 封装组件

定义可复用的轮播组件
    banner是在watch当中去创建swiper 因为组件创建的时候数据不一定更新
    floor是在mounted当中去创建swiper，因为内部组件创建的时候，数据已经存在了

    1、同一个组件  有好几个地方js代码是一样的                 封装函数   
    2、有好几个地方js代码是一样的                 封装模块（vue中还能封装混入（混合））         
    3、有好几个地方 html css  js都是一样的        封装组件 （html,css,js的混合体，混合件）

 抽离组件注意事项：
        1、html css  js写成一样，去封装组件
        2、封装好组件之后要考虑动态数据
        3、动态数据需要在使用的时候，由父组件进行传递