前言

最近项目里面又用到了轮播，之前用swiper也写过，所以毫不犹豫又下了swiper包，本以为三下五除二就能搞定了，结果最新版本的swiper@9.0.3是让我踩了一个又一个的坑啊！避坑指南来了，希望大家少走弯路！😩

正确代码

先贴下正确代码 nuxt框架引入包的写法都是一样的

版本号
"nuxt": "3.0.0-rc.12",
"swiper": "^9.0.3",
"vue-awesome-swiper": "^5.0.1"
代码部分 -- 下载包（如果不指定版本号就是最新版本的包）

npm install swiper@9.0.3 --save  
npm install vue-awesome-swiper --save

plugins文件夹创建swiper.ts文件，内容如下

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper.css'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(VueAwesomeSwiper)
  })

在nuxt.config.js中配置插件（根据项目自身不需要可不引入）
特别注意：nuxt3以上版本应该是不需要引入了，根据项目情况而定

plugins: [
  { src: "~/plugins/swiper.ts", ssr: false },
],

页面上使用


<swiper>
    <swiper-slide v-for="(item,index) in bannerList" :key="index">
      <img :src="item" alt="" >
    </swiper-slide>
</swiper>

import 'swiper/swiper.css'
import SwiperCore, { Autoplay } from 'swiper'
SwiperCore.use([Autoplay])
import Swipers from 'swiper'

export default defineComponent({
  setup() {
  //找图放到bannerList里面就行
    const bannerList = []
    onMounted(()=>{
      new Swipers('.swiper', {
        slidesPerView:1,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        loop: true,
      })
    })
    return {bannerList}
  }
})

页面上应该就已经有了
我写的如图，没有写分页什么的，如果有需求就找swiper文档正常写就可以

避坑指南

说一下遇到的坑

swiper.css引入路径的问题

如果css文件路径报错，千千万万记得去modules里面找到包看看正确路径到底是什么
目前版本@9.0.3 import 'swiper/swiper.css' 这样写是没有问题的

2.swiper标签里面加了 autoplay 属性不能生效，始终不能自动轮播

我当时在标签里面尝试了各种写法，发现始终不能生效，后来就百度了一下，发现需要引入autoPlay这个模块，如下图

然后终于不负众望，确实可以自动轮播了，但是新坑也来了如图控制台一直报一个警告 --- Component emitted event "autoplayTimeLeft" but it is neither declared in the emits option nor as an "onAutoplayTimeLeft" prop

警告.jpeg

然后为了这个坑，也是找了好多文档，试了好多种写法，发现也还是不行，最后阴差阳错吧，发现在onMounted里面初始化一下Swiper是可以的，所以发出来给大家避坑了，也就是上面的正确代码

注意可以在onMounted里面加个定时器哈，如果说页面上刚开始不能渲染，那就晚一秒去渲染，可能dom元素还没加载出来，也算是坑，这个看页面吧，如果没有影响的话，这个定时器就可以不加的！

总结

就swiper这种常用的包，更新也比较快，可能更新了一部分东西就会导致以往的一些写法在新版本中不适用了，还是要多看官方文档，包更新是更新了哪些东西，哪些写法有变动，才会更好更快的避坑吧！

vue3+nuxt3使用swiper踩坑记录 注意避坑！

前言

正确代码

避坑指南

总结

vue3+nuxt3使用swiper踩坑记录注意避坑！