在vue-cli中使用swiper

1.当前项目配置npm install vue-awesome-swiper --save

2，在main.js中加入

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

3.当前页面引入

 

 

 

//弹出框的轮播swiperOptionM: {//如下配置不懂的，能够去swiper官网看api，连接http://www.swiper.com.cn/api/  // notNextTick是一个组件自有属性，若是notNextTick设置为true，组件则不会经过NextTick来实例化swiper，也就意味着你能够在第一时间获取到swiper对象，<br>　　　　　　　　假如你须要刚加载遍使用获取swiper对象来作什么事，那么这个属性必定要是true  notNextTick: true,  // swiper configs 全部的配置同swiper官方api配置  autoplay: 3000,  direction : 'vertical',  grabCursor : true,  setWrapperSize :true,//开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能须要用到。  autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。  // pagination: {  //   el: '.swiper-pagination'  // },//圆点索引  paginationClickable :true,  prevButton:'.swiper-button-prev',//上一张  nextButton:'.swiper-button-next',//下一张  scrollbar:'.swiper-scrollbar',//滚动条  mousewheelControl : true,  observer:true,//当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，能够使用update()方法更新。  observeParents:true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。  effect: 'coverflow',//"coverflow"（3d流）  grabCursor: true,//开启鼠标的抓手形状  centeredSlides: true,//设定为true时，active slide会居中，而不是默认状态下的居左。  slidesPerView: 'auto',//设置slider容器可以同时显示的slides数量(carousel模式)。  direction : 'horizontal',  coverflowEffect: {//cover flow是相似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式    rotate: 50,//slide作3d旋转时Y轴的旋转角度。默认50。    stretch: 0,//每一个slide之间的拉伸值，越大slide靠得越紧。 默认0。    depth: 100,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。    modifier: 1,//depth和rotate和stretch的倍率，至关于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。    slideShadows : true,//开启slide阴影。默认 true。  },  // 若是自行设计了插件，那么插件的一些配置相关参数，也应该出如今这个对象中，如debugger  debugger: true,},Bulletslidearea:true,//轮播遮罩层区域显示与隐藏