Vue学习31_vue-awesome-swiper使用过程遇到的坑以及解决方案

vue-awesome-swiper使用过程遇到的坑以及解决方案

1. 第一个坑：根据vue-awesome-swiper官方文档对vue-awesome-swiper进行了引用：

import 'swiper/css/swiper.css'

启动项目时：提示无法找到该文件：找不到原本的截图，此处提示错误应该是找不到import 'swiper/css/swiper.css’文件

原因：文件夹目录结构发生了变化：
还有另一种可能是，在新版中引用的不是该文件，
而是通过：

import 'swiper/swiper-bundle.css'

进行引用

在swiper目录结构中，存放swiper.css文件夹的目录发生了变化，要根据实际目录对文件进行引用：

import 'swiper/dist/css/swiper.css'

2.第二个坑：引用玩所有的文件并且实现轮播后，发现轮播图底下的小圆点没有出现，百度了许多解决方法，一一操作了一番也没有得到解决方案，最后猜测一波是包版本太高了，官网最新的版本太高，主动降低版本号：

经过此操作后，最终得到了解决：小圆点终于出现啦

当然，百度上的其他方法可能也是可以解决此问题的，但笔者对此方面知识掌握不深，只得出此解决方案。