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