vue3 swiper 8 安装使用遇到的问题及处理

npm i swiper

main.js

    import VueAwesomeSwiper from 'vue-awesome-swiper';
    app.use(VueAwesomeSwiper)

页面使用

    <swiper
        class="swiperBox"
        :slides-per-view="1.05"
        @slideChange="onSlideChange"
    >
        <swiper-slide>111111</swiper-slide>
        <swiper-slide>222222</swiper-slide>
    </swiper>

    import { Swiper, SwiperSlide } from 'swiper/vue'
    import 'swiper/css';

异常

Module not found: Error: Can't resolve '[vue-awesome-swiper]'

处理

npm i vue-awesome-swiper

异常找不到swiper/css

处理

import 'swiper/css' 改成 import 'swiper/swiper.min.css'

自动轮播不生效，需要另外引入Autoplay

import { Autoplay } from 'swiper';

<swiper
    :modules="[Autoplay]"
    class="swiperBox"
    :slides-per-view="1.05"
    :loop="true"
    :autoplay="{ delay: 2500, disableOnInteraction: false }"
    @slideChange="onSlideChange"
>
    <swiper-slide>111111</swiper-slide>
    <swiper-slide>222222</swiper-slide>
</swiper>