Vue3使用 swiper 详细总结 填坑分享

起因

使用 swiper 的时候，遇到了一些问题，通过这篇文章总结一下。先来简单说下我都遇到了哪些问题，后面会有对应的解决方法。

• 安装默认 swiper版本，用了 swiper官网推荐的配置，会有报错和不兼容的情况
  这是我遇到的报错：To install them, you can run: npm install --save swiper/css swiper/vue
• 左右切换按钮无效，分页Pagination不显示
• vue单文件组件中无法修改swiper样式

安装

建议安装 swiper@6.3.5 这个版本。我开始是默认安装的最高版本，Pagination分页器配置了之后没有效果，降到这个版本就好使了。版本太高可能会出现不兼容的情况。

npm i swiper@6.3.5

配置

我没用官网给的方法，用的时候会出现一些报错，还有不兼容的情况，文档介绍的也不是很清楚。查了一些资料，总结出一个好使的配置方法。

在 Vue 中使用 Swiper 这是官网的链接

html和css

<template>
  <div class="swi