需求很简单，就是一个简单的图片轮播，本来想直接使用swiper，结果网上搜了下，在vue中使用的基本上都是vue-awesome-swiper，于是就开始了一系列的坑。中间过程不多介绍，直接说结果吧。

最好使用稳定版本 vue-awesome-swiper3.1.3，这样会让你少走坑。希望对你有帮助

1、安装

npm install vue-awesome-swiper3.1.3 --save

2、引入

全局引入 缺一不可
import Vue from 'vue';import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper)

3、代码部分

 <swiper  :options="swiperOption" ref="swiperLogin"  ><swiper-slide v-for="(item,index) in carouselList" :key="index" ><img :src="item.path" style="width:100%;height:100%" alt=""/></swiper-slide></swiper>data(){return {carouselList: [   //图片{path: require('../assets/one.jpg')},{path: require('../assets/two.jpg')},{path: require('../assets/three.jpg')},{path: require('../assets/four.jpg')},{path: require('../assets/six.jpg')},{path: require('../assets/seven.jpg')},{path: require('../assets/eight.jpg')},{path: require('../assets/night.jpg')},{path: require('../assets/ten.jpg')}],}}       

4、配置项

data(){return{swiperOption: {initialSlide: 0,loop: true,speed: 400,autoplay: {delay: 3000,disableOnInteraction: false},// grabCursor: true,setWrapperSize: true,autoHeight: true,uniqueNavElements: true,preventInteractionOnTransition: false,allowSilderPrev: true,allowSilderNext: true,//   scrollbar:'.swiper-scrollbar',//滚动条mousewheelControl: true,observer: true,observeParents: true,debugger: true,}}
}

5、swiper对象

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