Nuxt框架下引入Swiper完成带缩略图照片轮播的黑科技

笔者的吐槽 （赶时间请忽略这段文字，直接进入正文 _(:з」∠)_ ）：最近有个项目是基于Nuxt框架，新需求需要新增加一块照片轮播的功能，笔者小白之前用过Swiper插件，感觉还比较好用，一般简单的效果都能实现，于是，按某站点的攻略，开始安装Swiper（npm install swiper)，然后按照文章里基于vue的开发，笔者开始照猫画鼠的try try try之路（用swiper6吧，按攻略1的写法其实是用了swiper3的语法，但是效果无法自动翻页；打算用swiper6的语法呢，发现6只能在vue3以上使用，而nuxt中包含的vue版本是2.x；用vue-awesome-swiper，根据攻略进行了plugins相关配置，创建组件并且进行了封装，结果发现兜兜转转还是老问题，无法自动翻页，最后突然间，头脑中闪过一道闪电 Σ(っ °Д °;)っ 原来是这样！！！）

正文

项目背景：依赖包 nuxt、vue-class-component、vue-property-decorator、typescript；

项目需求：完成带有缩略图的图片轮播效果；

方案步骤：

1、在 nuxt.config.js 文件引入swiper js和css包（笔者用的是 4.4.2，代码挂在在cdn上，这里演示就用 url 字样代替具体地址吧）