Vue中引入swiper報錯的問題及解決
首先上報錯信息
-----------更新-------------------------------------------
都是由于版本問題惹得鍋?。?!
剛開始我的swiper安裝的是最新版,也就是7.0的版本,但是報各種錯,我就降成了6.0的版本。
頁面是可以正常顯示出來了,但是我的swiper的options配置完全不起作用,不能自動播放,也不顯示分頁器注意。
查詢得知VUE2對于高版本的swiper可能兼容性不好,所以我卸載了6.0的版本,安裝了老版本
npm install swiper@5 vue-awesome-swiper@3 -S
但是還是報錯,錯誤信息如下:
Cannot set property ‘params‘ of undefined
查詢得知
@3.x 版本的 ---- 引入模塊時使用小寫
import { swiper, swiperSlide } from “vue-awesome-swiper”;
@4.x 版本的 ---- 引入模塊時使用大寫
import { Swiper, SwiperSlide } from “vue-awesome-swiper”;
我改成小寫之后終于成功了,界面完好顯示
-----------更新-------------------------------------------
These dependencies were not found:
swiper in ./node_modules/vue-awesome-swiper/dist/vue-awesome-swiper.jsswiper/css/swiper.css in ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Banner.vue?vue&type=script&lang=js&
To install them, you can run: npm install --save swiper swiper/css/swiper.css‘
對于第二個報錯的原因,github官網(wǎng)上已經(jīng)給出原因
https://github.com/surmon-china/vue-awesome-swiper
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // import style (>= Swiper 6.x) import 'swiper/swiper-bundle.css' // import style (<= Swiper 5.x) import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
去到package.json里面查看安裝的swiper的版本號,為7.x版本
所以把導入css的代碼替換為import 'swiper/swiper-bundle.css'
對于第一個錯誤原因,是由于swiper的版本過高問題導致的,卸載當前版本:npm uninstall --save swiper
下載swiper6.x版本
npm install --save swiper@6.8.1
所有報錯問題解決。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用electron-builder將項目打包成桌面程序的詳細教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08