一、背景
在项目中使用最新版本的vue-awesome-swiper插件时,发现分页器的显示有bug
因此决定重新安装旧版本
注意:Swiper6 对应的是 vue-awesome-swiper的最新版本
接下来介绍的是基于Swiper2 的 vue-awesome-swiper的v2.6.7版本
二、全局安装
安装 swiper
npm install swiper -S
安装指定版本的 vue-awesome-swiper
npm install vue-awesome-swiper@2.6.7 --save
在main.js中 引入vue-awesome-swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
在main.js中 引入对应的CSS文件
import 'swiper/swiper-bundle.css'
注意:如果引入CSS的路径出错,就会导致“找不到swiper模块”的编译错误
建议大家直接打开项目根目录下的node_modules文件夹
找到vue-awesome-swiper中的CSS文件
再将此路径放入上面这条import语句中
在main.js中 全局注册vue-awesome-swiper
Vue.use(VueAwesomeSwiper)
三、使用swiper时的报错
按照文档编写轮播图相关的代码后
使用npm run dev运行项目后报错如下:
Maximum call stack size exceeded
造成堆栈溢出的原因可能是使用了递归并写错了递归结束的条件
但在排除这些错误后,页面依然报错
这时我才发现这个轮播图组件的命名是 'Swiper.vue',与swiper这个依赖重名了
因此,在页面根组件渲染
将轮播图所在组件改名后,页面就能正常运行了