1.在命令行里面输入
npm install vue-awesome-swiper@2.6.7 --save
2.在main.js文件里面写入一下代码
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
3.在组件中应用vue-awesome-swiper插件
3.1.template标签内的内容
<div class="swiper_wrap">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="item in swiperarr" :key="item.id">
<img class="img_tab" :src="item.url" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
3.2.script标签内容
export default {
name:'HomeSwiper',
data () {
return {
swiperOptions: {
// 分页器设置
pagination: '.swiper-pagination',
// 环状轮播
loop: true
},
swiperarr:[
{url:'https://imgs.qunarzz.com/vs_ceph_vcimg/79faa5a73731e84a7731db49d5baa91e.jpeg',id:'0'},
{url:'https://imgs.qunarzz.com/vs_ceph_vcimg/c0a60fa20379efa4f02ce527a680dc1b.jpeg',id:'1'},
]
};
}
}
3.3.css部分代码
<style lang='stylus' scoped>
.swiper_wrap >>> .swiper-pagination-bullet-active
background: #fff
.swiper_wrap
100%
height: 32.5vw
.img_tab
100%
</style>