一般在我們寫輪播圖的時候都會想到使用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版本需要把$去掉
到這里呢，一個根據縮略圖可控制的輪播圖應該就可以出現了。
完結！