1.首先安装    vue-awesome-swiper   (安装前首先按照nodejs,vue)

npm install vue-awesome-swiper --save

2.在main.js中引入安装的依赖

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(vuePicturePreview)
Vue.use(VueAwesomeSwiper, /* { default global options } */)

3.在需要使用vue-awesome-swiper 的组件中配置

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default{
    components:{
        swiper,
      swiperSlide
        },
    data(){
       return{
          //定义一个变量,接收后台传过来的图片
            loop:[],

             swiperOption: {
          // 所有配置均为可选（同Swiper配置）
          pagination: {
            el: '.swiper-pagination'
          },
          paginationClickable :true,
          prevButton:'.swiper-button-prev',
          nextButton:'.swiper-button-next',
          scrollbar:'.swiper-scrollbar',
          mousewheelControl : true,
          observeParents:true,
          // onTransitionStart(swiper){
          //   console.log(swiper)
          // }
          slidesPerView: 3,
              spaceBetween: 30,
              // slidesPerGroup: 3,
              // grabCursor: true,//鼠标光标
              autoplay: {
                delay: 3000,//秒
                stopOnLastSlide: false,
                disableOnInteraction: false,//滑动不会失效
              },
              loop: true,
              loopFillGroupWithBlank: true,
              pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
              navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
              },
        },
    }
}
    

}
</script>

4.在<template></template>中写入对应的html

注意: 如果出现不自动轮播的情况,加上 v-if="loop.length>1"  可以完美解决

<swiper :options="swiperOption" v-if="loop.length>1">
              <swiper-slide v-for="(item, index) in loop" :key="index">
                <img :src="item.BUrl" style="width:377px;height:180px;">
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
              <div class="swiper-scrollbar"   slot="scrollbar"></div>
 </swiper>