Vue3中使用Swiper8

最近在开发时需要用到轮播效果，想着用swiper实现一下，一看官网，都更新到8了，看了官网跟着配置了一下，发现根本不能用......

因为Swiper8已经更新好多次了，官网的示例的引入路径也早已经在最新版做了改变，但是官网没有更新，我们需要去看node_modules中swiper具体的路径

在实现之前，先介绍一下Swiper：

• Swiper是纯Javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

• Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

• Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择。

Swiper的应用场景广泛，实现效果很好，下面个这实际案例就是Swiper的典型应用场景。

废话不多说，开始

版本说明： 先在你的项目中直接使用，如果不行再更新指定的版本

//卸载vue
npm uninstall vue
//安装指定版本
npm install vue@3.2.33

//卸载swiper
npm uninstall swiper
//安装指定版本
npm install swiper@3.2.33

"swiper": "^8.1.6",
"vue": "^3.2.33",

<template>
  <swiper
    :modules="modules"
    :pagination="{ clickable: true }"
    :autoplay="autoplayOptions"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
  </swiper>
</template>

<script lang="ts" setup>
//这里就是更新后的路径，以前是import { Swiper, SwiperSlide } from 'swiper/vue'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'


import { Pagination, A11y, Autoplay } from 'swiper'

//这里就是更新后的路径，以前是import 'swiper/css'
import 'swiper/swiper.min.css'

//自动轮播的配置
const autoplayOptions = {
  delay: 500,
  disableOnInteraction: false,
  loop: false,
  pauseOnMouseEnter: true,
  reverseDirection: true
}

const onSwiper = (swiper: any) => {
  console.log(swiper)
}
const onSlideChange = (e) => {
  // swiper切换的时候执行的方法
  console.log('slide change', e.activeIndex)
}
const modules = [Pagination, A11y, Autoplay]
</script>
<style lang="less" scoped>
.swiper {
  .swiper-slide {
    height: 200px;
  }
}
</style>

好了，刷新页面效果就有了

注意：如果安装以前的6.几的版本时，可能会出现安装的swiper/vue里面没有东西。个人猜测是swiper给删除了