vue中使用swiper轮播图的正确姿势(亲测有效)

vue create 项目名 

cd 项目名

npm i swiper vue-awesome-swiper

npm i swiper@5

<template>
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
            </div>
            //换页器
            <div class="swiper-pagination">

            </div>
            //前进后退
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            //滚动条
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</template>

<script>
    import 'swiper/css/swiper.css'  //引入swiper样式
    import Swiper from 'swiper';	//引入swiper
    export default {
        name: "Swiper",
        data(){
            return{
                imgs:[
                    {pic:require('../assets/img/swiper1.jpg')},
                    {pic:require('../assets/img/swiper2.jpg')},
                    {pic:require('../assets/img/swiper3.png')}
                ]
            }
        },
        mounted() {
            var mySwiper=new Swiper('#swiperIndex',{
                //配置分页器内容

                loop: true, // 循环模式选项
                pagination:{
                    el:".swiper-pagination",//换页器与哪个标签关联
                    clickable:true//分页器是否可以点击
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            })
        }
    }
</script>

<style lang="less">
    #swipercom{
        width: 7.5rem;
        #swiperIndex.swiper-container{
            width: 7.1rem;
            height: 2.6rem;
            border-radius: 0.1rem;

            .swiper-slide img{
                width: 100%;
            }
            .swiper-pagination-bullet-active{
                background-color: orangered;
            }
        }
    }
</style>

<template>
  <div class="home">
<!--    轮播图-->
    <swiperCom></swiperCom>
  </div>
</template>

<script>
import SwiperCom from "@/components/swiperCom";
export default {
  name: 'HomeView',
  components: {
 	SwiperCom
  }
}
</script>

<style scoped>
</style>