直播app源码，使用vue-awesome-swiper创建轮播图幻灯片
1. 引入
引入方式可以参考官方文档，两种方式选一种即可：vue-awesome-swiper at v3.1.3
（1）第一种方式：在main.js入口文件中全局引入
// /src/main.js
// swiper全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
（2）第二种方式：在需要使用轮播图的文件中按需引入
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
</script>
2.使用轮播图
<template>
<div>
<swiper ref="mySwiper" :options="swiperOption">
<!-- 三张轮播图 -->
<swiper-slide>
<img src="../assets/images/pic1.jpeg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/images/pic2.jpeg" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/images/pic3.jpeg" alt="">
</swiper-slide>
<!-- 分页器。如果放置在swiper外面，需要自定义样式。 -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
// swiper已经全局引入过了，因此这里没有再引入
export default {
name: 'HomeView',
data() {
return {
//swiper轮播
swiperOption: {
pagination: {
el: '.swiper-pagination'
}
},
}
},
}
</script>
以上就是 直播app源码，使用vue-awesome-swiper创建轮播图幻灯片，更多内容欢迎关注之后的文章