vue3.0+swiper7轮播图片插件相关工具个人学习笔记

#1.vue3.0结合swiper7实现图片轮播插件的使用经验与问题解决过程记录

前言：

在开发Vue3项目时，我计划寻找一个轮播组件，最终选择了Swiper。然而，直接复制官网提供的代码显然并非正确的做法（这是官方常见的操作方式）。

依照某篇教程的指引，我先后安装了@7版本并卸载后又安装了@6版本，结果问题不断，接连出现各种错误，令人困扰不已，实在让人感到烦躁。

翻遍了各种博客资料，最终还是找到了可行的成功案例。

参考了这位高手的经验我才得以完成，爱唱歌的前端

相信有不少朋友在使用swiper过程中遇到了不少问题，这里做个记录供大家参考。（想要一次性成功的代码可以直接跳转到第四部分）

一、安装

在使用最新版 swiper@7.4.1 的过程中遇到了错误提示，因此我参考了他人的安装方法，选择了版本为 7.2.0 的 swiper 进行部署。

所采用的插件版本为：swiper@7.2.0

当前使用的 vue 版本为：vue3.0 配合 cli4.5

具体安装步骤如下：

    npm install --s