Vue中引入swiper報(bào)錯(cuò)的問(wèn)題及解決
首先上報(bào)錯(cuò)信息
-----------更新-------------------------------------------
都是由于版本問(wèn)題惹得鍋！?。?/strong>
剛開始我的swiper安裝的是最新版，也就是7.0的版本，但是報(bào)各種錯(cuò)，我就降成了6.0的版本。
頁(yè)面是可以正常顯示出來(lái)了，但是我的swiper的options配置完全不起作用,不能自動(dòng)播放，也不顯示分頁(yè)器注意。
查詢得知VUE2對(duì)于高版本的swiper可能兼容性不好，所以我卸載了6.0的版本，安裝了老版本
npm install swiper@5 vue-awesome-swiper@3 -S
但是還是報(bào)錯(cuò)，錯(cuò)誤信息如下：
Cannot set property ‘params‘ of undefined
查詢得知
@3.x 版本的 ---- 引入模塊時(shí)使用小寫
import { swiper, swiperSlide } from “vue-awesome-swiper”;@4.x 版本的 ---- 引入模塊時(shí)使用大寫
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‘
對(duì)于第二個(gè)報(bào)錯(cuò)的原因，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的版本號(hào)，為7.x版本
所以把導(dǎo)入css的代碼替換為import 'swiper/swiper-bundle.css'
對(duì)于第一個(gè)錯(cuò)誤原因，是由于swiper的版本過(guò)高問(wèn)題導(dǎo)致的，卸載當(dāng)前版本：npm uninstall --save swiper
下載swiper6.x版本
npm install --save swiper@6.8.1
所有報(bào)錯(cuò)問(wèn)題解決。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vite打包時(shí)去除console的方法實(shí)現(xiàn)
Vite打包項(xiàng)目時(shí),需要去除開發(fā)時(shí)加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時(shí)去除console的方法實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
Vue學(xué)習(xí)筆記進(jìn)階篇之過(guò)渡狀態(tài)詳解
本篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之過(guò)渡狀態(tài)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了如何在Vue2中實(shí)現(xiàn)組件props雙向綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
使用electron-builder將項(xiàng)目打包成桌面程序的詳細(xì)教程
這篇文章主要介紹了使用electron-builder把web端的項(xiàng)目打包生成桌面程序,并可安裝程序,文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-08-08
vue項(xiàng)目中使用tinymce編輯器的步驟詳解
本文分步驟給大家介紹了vue項(xiàng)目中使用tinymce編輯器的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
下面小編就為大家分享一篇基于Vuex無(wú)法觀察到值變化的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue的watch偵聽器格式有兩種：方法格式和對(duì)象格式的偵聽器，這篇文章主要介紹了Vue watch 偵聽對(duì)象屬性相關(guān)知識(shí),需要的朋友可以參考下2023-04-04
vue3中的對(duì)象時(shí)為proxy對(duì)象如何獲取值(兩種方式)
使用vue3.0時(shí)，因?yàn)榈讓邮鞘褂胮roxy進(jìn)行代理的所以當(dāng)我們打印一些值得時(shí)候是proxy代理之后的是Proxy<BR>對(duì)象，Proxy對(duì)象里邊的[[Target]]才是真實(shí)的對(duì)象，那么如何獲取這個(gè)值呢，下面下面給大家介紹兩種方式，感興趣的朋友一起看看吧2023-01-01
簡(jiǎn)單說(shuō)說(shuō)如何使用vue-router插件的方法
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue?插件及瀏覽器本地存儲(chǔ)，插件通常用來(lái)為Vue添加全局功能，包含install方法的一個(gè)對(duì)象。更多相關(guān)介紹，需要的小伙伴可以參考下面文章內(nèi)容2022-05-05