一犀变、背景
在項目中使用最新版本的vue-awesome-swiper插件時沉噩，發(fā)現(xiàn)分頁器的顯示有bug
因此決定重新安裝舊版本
注意：Swiper6 對應(yīng)的是 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中 引入對應(yīng)的CSS文件
import 'swiper/swiper-bundle.css'
注意：如果引入CSS的路徑出錯抱虐，就會導(dǎo)致“找不到swiper模塊”的編譯錯誤
建議大家直接打開項目根目錄下的node_modules文件夾
找到vue-awesome-swiper中的CSS文件
再將此路徑放入上面這條import語句中
在main.js中 全局注冊vue-awesome-swiper
Vue.use(VueAwesomeSwiper)
三当凡、使用swiper時的報錯
按照文檔編寫輪播圖相關(guān)的代碼后
image.png
使用npm run dev運行項目后報錯如下：
Maximum call stack size exceeded
造成堆棧溢出的原因可能是使用了遞歸并寫錯了遞歸結(jié)束的條件
但在排除這些錯誤后著觉，頁面依然報錯
這時我才發(fā)現(xiàn)這個輪播圖組件的命名是 'Swiper.vue'逞刷，與swiper這個依賴重名了
因此嘉涌，在頁面根組件渲染<Swiper></Swiper>時，會發(fā)生堆棧溢出的錯誤
將輪播圖所在組件改名后夸浅，頁面就能正常運行了
