在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,//輪播遮罩層區域顯示與隱藏