vue 使用swiper6

Question

官网示例https://swiperjs.com/vue

新手Vue还请大家帮忙看下什么原因

Answer 1

我之前在项目中是vue3+swiper6
和低版本还是有很大区别的
模板html代码

<swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="swiper_options.pagination">
      <swiper-slide><img src="@/assets/img/ce0752e83e81a006.jpg" alt=""></swiper-slide>
      <swiper-slide><img src="@/assets/img/9c7efaa9adbea26f.jpg" alt=""></swiper-slide>
</swiper>

js代码

import {reactive,ref} from 'vue';
// 使用swiper的compositon API
import SwiperCore, {Autoplay,Pagination} from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/vue';
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Autoplay,Pagination]);
export default {
    name:'Home',
    components:{
          Swiper,
          SwiperSlide,
    },
    setup() {
                // swiper相关配置属性放在swiper_options这个变量里
        let swiper_options = reactive({
            autoplay:{
                delay:3000,
                disableOnInteraction: false
            },
            loop:true,
            speed:1000,    
            pagination:{
                clickable: true
            }
        })
                // 将swiper_options返回给模板中的swiper组件使用
        return {swiper_options};
    }
}

Answer 2

1. 是否有执行 npm i swiper;
2. package.json 的 dependencies 是否有 swiper, 查看安装版本;