1.先安装组件 cnpm install vue-awesome-swiper;

2.在main.js下引入文件:

 import VueAwsomeSwiper from 'vue-awesome-swiper';

Vue.use(VueAwsomeSwiper);

//创建组件banner.vue

<template>

<div>

    <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper" class="banner">

       <swiper-slide v-for="item in listImg">        <a :href="item.linkUrl"><img class="banner-img" :src="item.picUrl" /></a>      </swiper-slide      <div class="swiper-pagination" slot="pagination"></div>    </swiper>  </div</template>

<script type="text/ecmascript-6">
  import {swiper,swiperSlide} from 'vue-awesome-swiper';
  
require('swiper/dist/css/swiper.css'); //轮播样式
  export default{
    props:['listImg'],
    data(){
      notNextTick:true,
      swiperOption:{
         autoplay: true,
        direction: 'horizontal',
        loop:true,
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true,
        onTransitionStart(swiper) {
         console.log(swiper)
        }

      }
    },
    
    computed: {
       swiper(){
       return this.$refs.mySwiper.swiper;
       }
    },
     
    mounted(){
    this.swiper.slideTo(0, 0, false)
    },
    
    components: {
     swiper,
    swiperSlide
    },
 
  }
</script>