vue-awesome-swiper 的使用 以及解决swiper插件处理通过append追加上去的元素，无法添加pagination的问题

Swiper常用于移动端网站的内容触摸滑动
安装
npm install vue-awesome-swiper@2.6.7 --save
使用

import VueAwesomeSwiper from  'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

<template>
  <div class="rapper">
  <swiper :options="swiperOption"  >
    <swiper-slide v-for="(item,index) in swiperList" :key="index">
      <img class="swiper-img" :src="item.imgUrl">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
    export default {
        name: "HomeSwiper",
        data () {
            return {
                swiperOption: {
                    /*定义轮播图的点*/
                    pagination : '.swiper-pagination',
                    /*实现轮播图循环播放*/
                    loop: true,
                    autoplay:2000
                },
                swiperList: [
                    { id : '0001' ,imgUrl : 'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'},
                    { id : '0002' ,imgUrl : 'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'},
                    { id : '0003' ,imgUrl : 'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg'}
                ]
            }
        }    }
</script>

<style lang="stylus" scoped>
  /*不受scoped的限制 穿透*/
  .rapper >>> .swiper-pagination-bullet-active
    
    /*使该条样式属性声明具有最高优先级 默认点是蓝色的*/
    background #fff !important
  .rapper
  //提前占位 防止页面网速较慢 页面有抖动
    width 100%
    height 0
    overflow hidden
    padding-bottom 31.25%
    .swiper-img
       width 100%
</style>

解决swiper插件处理通过append追加上去的元素，无法添加pagination的问题
加上这两句即可
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true//修改swiper的父元素时，自动初始化swiper

原因：swiper初始化一次，如果追加了之后，但是初始化时记载了总共有多少个slide；
解决方法；每次追加后，重新初始化swiper

总结
1.css使用padding-bottom百分比进行提前占位，防止抖动
相对于父元素宽度的31.25%，不是相对于自己的width
2.>>>穿透作用，因为swiper-pagination-bullet-active类是在组件内部定义的，想要rapper也能作用到，可以用>>>
3.awesome-swiper的使用 配置项 swiperOption