在Vue中使用swiper 一：安装
npm install vue-awesome-swiper --save
二：引入 在全局main.js内：
import vueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(vueAwesomeSwiper)
在使用的组件页面内：
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
三：案例：
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
其中，swiper的属性 @someSwiperEvent="callback”
@someSwiperEvent为父组件定义的事件，如果有需要可在此处（子组件）赋予回调操作，没有操作需要时删掉即可。
之前引入时：
import { swiper, swiperSlide } from "vue-awesome-swiper";
引入了 swiperSlide（在使用时驼峰命名会变成使用横线分割，因为HTML标签不区分大小写）所以可以使用 <swiper-slide>标签
swiper-slide 内为轮播的内容，下方各个div为可视操作按钮，例如左右箭头、底部小圆点以及展示当前第几张的滚动条/进度条等
在组件的 data 内设置 swiperOption：
data() {
return {
swiperOption: {
loop: true,
autoplay: {
delay: 3000,
speed: 200,
disableOnInteraction: false, //用户操作swiper后是否禁止autoplay，默认为true：操作后停止。操作包括触碰、拖动、点击分页器pagination等
stopOnLastSlide: false //为true时当切换到最后一个slide时停止自动切换
},
on: {
slideChangeTransitionStart: function() { //回调函数，swiper从当前slide开始过渡到另一个slide时执行。
//do something
}
}
}
};
},
事件类操作在
on: {
}
内编写。 组件的components引入：
components: {
swiper,
swiperSlide
},
在computed内设置：
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
操作时对data内的 swiperOption 修改即可
其他API信息：www.swiper.com.cn/api/index.h…
Vue.$set 为已存在的对象新增属性
Vue 刷新当前页面
vue.$emit父子组件通信 blog.csdn.net/sllailcp/ar…
以及bus总线
