五、Vue中使用轮播图插件：vue-awesome-swiper

1.安装vue-awesome-swiper2.6.7插件

cnpm install vue-awesome-swiper@2.6.7 --save

2.在main.js中引入

main.js

// 引入轮播插件：vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

3.Swipper.vue模板

<template>
  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <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,
          // 自动轮播，单位ms   
          autoplay: 5000
      }, 
      // 轮播图数据源   
      swiperList: [
          {
              id: '0001',
              imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/dc11f0bb94057224b104a2017f313e21.jpg_750x200_feee379d.jpg'
          },
          {
              id: '0002',
              imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/64beebd2f4e2447db0891e8b890b5a07.png_750x200_ab33275f.png'
          }
      ]
    };
  }
};
</script>
<style lang="stylus" scoped>
    //改变轮播图滑动点的颜色
    // 这样写的原因：我们这里加了scoped，只在本域中生效，但是滑动点的颜色是由
    // <swiper> 元素控件的，swiper-pagination类只是起到个设置作用，最终还是
    //要传递给<swiper> 元素，所以我们需要如下写法，来穿透 scoped 限制域，使设置生效
    .wrapper >>> .swiper-pagination-bullet-active
        background #fff
    // wrapper：确保宽高比为 31.25%，主要用来解决当网速不行时，依然保证轮播图
    //已占据控件，DOM元素不会发生抖动现象
    .wrapper
        overflow hidden
        width 100%
        height 0
        padding-bottom 26.67%
        background #eee
        .swiper-img
            width 100%

</style>