先上图

安装 
npm install vue-awesome-swiper --save

全局引入(main.js)
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'

(部分数据来自接口)

	<swiper :options="swiperOption" ref="mySwiper" v-if="swiperList.length>1">
<!--用v-if控制loop环状轮播，否则不起作用-->
		<swiper-slide v-for="(item,index) in swiperList"
			:index="index" :key="item.index" class="swiper_box">
				<div class="goodsimg">
					<img :src=imgURL+item.goodsPicture alt="" />
				</div>
				<p class="rank">TOP{{index+1}}</p>
				<p class="code">{{item.goodsCode}}</span>
				</p>
				<p class="viewnum">浏览量：{{item.browseAmount}}</p>
		</swiper-slide>
	</swiper>

data 里面的配置

    data() {
			return {
				swiperOption: {
					//设定初始化时slide的索引
					initialSlide: 0,
					//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)
					direction: 'horizontal',
					autoplay: {
						delay: 2500, //1秒切换一次
						disableOnInteraction: false,
					},
					//环状轮播
					loop: true,
					slidesPerView: 'auto',
					loopedSlides: 3,
					loopAdditionalSlides: 0,
					//一个屏幕展示的数量
					slidesPerView: 3,
                    //间距
					spaceBetween: 26,
					//修改swiper自己或子元素时，自动初始化swiper
					observer: true,  
					//修改swiper的父元素时，自动初始化swiper 	
					observeParents: true
				},
				swiperList: []
			}
		},

运行swiper

computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			}
		},