vue引入vue-awesome-swiper

1)安装插件

npm install swiper  vue-awesome-swiper@3.1.3  --save

2）引入

1. 全局引入

   在main.js中引入
   

	import Vue from 'vue' 
    import VueAwesomeSwiper from 'vue-awesome-swiper';
    import 'swiper/dist/css/swiper.css';
    Vue.use(VueAwesomeSwiper)

2. 局部引入
   在组件中引入

	import {Swiper,SwiperSlide} from 'vue-awesome-swiper';
     import 'swiper/dist/css/swiper.css'
     export default{
      components:{Swiper,SwiperSlide},
    }

3）使用

<swiper :options="swiperOptions">
        <swiper-slide v-for="(item,index) in slideList" :key="index" class="slide">
          第{{item}}张
        </swiper-slide>
        <div class="swiper-pagination" v-for="(item,index) in slideList" :key="index" slot="pagination"></div>
      </swiper>
<script>
export default{
	data(){
			  swiperOptions:{
                    notNextTick:true,//如果加载完，就需要swiper对象做一些事情，notNextTick要设置为true,
                    loop:true,//是否循环
                    initialSlide:0,//设定初始化时slide的索引
                    //是否自动播放
                    autoplay:{
                        delay:1500,
                        stopOnLastSlide:false,
                        disableOnInteraction:false,
                    },
                    speed:800,//滑动的速度
                    direction:'horizontal',//滑动方向

                    grabCursor: true,//小手掌抓取滑动
                    //配置分液器
                    pagination:{
                      el:'.swiper-pagination',
                      clickable:true,
                      type:'bullets'
                    }
                }
	}

}

</script>