1.安装：npm install vue-awesome-swiper --save
2.局部引入：
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
components: {
swiper,
swiperSlide
},
3.使用：
<!-- 轮播图 -->
<div class="swiper">
<swiper :options="swiperOption" class="swiper-container">
<!-- slides -->
<swiper-slide class="swiper-item" v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" />
</swiper-slide>
<!-- 显示小点-->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- 轮播图 -->
data() {
return {
swiperOption: {
pagination: {
el: ".swiper-pagination",
clickable: true //点击小圆点
},
notNextTick: true,
loop: true, //循环
speed: 1000,
autoplay: true
// grabCursor: true //小手掌抓取滑动
},
//三张轮播，使用变量循环
swiperList: [
{
id: "001",
bg: "white",
imgUrl:"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/1550974453867424.jpg"
},
{
id: "002",
bg: "red",
imgUrl:
"https://trade-prod.oss-cn-beijing.aliyuncs.com/paas_shop_static/market_advertiseImage/597831022050017280.jpg"
}
]
};
}