一般在我们写轮播图的时候都会想到使用swiper插件 ，但是显而易见出了很多问题，所以我用了vue-awesome-swiper来实现
提前说 使用这个插件最大的坑就是版本！版本！版本！不同的版本号写法不一样 所以中间会有很多坑 所以在安装的时候就要清楚的知道自己要安装的版本是多少。
1、安装。执行下面命令的时候默认会安装两个包：vue-awesome-swiper和swiper
最新版的：npm install swiper vue-awesome-swiper --save
我使用的：npm install vue-awesome-swiper@3 --save-dev
这是我的package.json文件：
2、main.js引入
在这一步的时候会踩坑的是swiper的css文件的引入，根据网上五花八门的引入方式大致有3种：
第一种：import 'swiper/dist/css/swiper.css'
第二种：import 'swiper/css/swiper.css'
第三种：import 'swiper/swiper-bundle.css'
而会有这种情况的原因就是swiper版本的不同，所以不同的版本有不同的引入方式，最直接的方式就是自己直接去node_modules里面找到下载的swiper包，然后找到对应的css去引入。
如果实在还是报错找不到css的话，就直接简单粗暴安装和我上面截图一样的版本：npm install swiper@7.0.8
这是我的main.js文件引入方式：我就是上面说的第三种引入方式
3、在组件中使用swiper
链接官网效果：https://github.surmon.me/vue-awesome-swiper
给你们大致截个图 具体的点链接进去复制
把上面的代码复制到自己的项目中，把图片改一下之后就没问题了。我也是复制的，本来就是插件压根不需要自己造*。
如果你的版本号和我的一样的话，这时候你应该会遇到两个问题：
（1）出现 Error in render: "TypeError: Cannot set property 'params' of undefined"的报错，这是因为版本号的问题。因为下载复制下来的代码中的写法用的是版本比较新的，而我是3.0版本，首字母要小写。
（2）出现"TypeError: Cannot read properties of undefined (reading 'controller')" 的报错，很显然是和上面同样的问题，写法改一下就可以。新版的写法是this.$refs.swiperTop.$swiper。而我们3.0版本需要把$去掉
到这里呢，一个根据缩略图可控制的轮播图应该就可以出现了。
完结！