欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中引入swiper報錯的問題及解決

 更新時間:2022年10月18日 15:21:35   作者:望嶼  
這篇文章主要介紹了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)文章

  • Vite打包時去除console的方法實現(xiàn)

    Vite打包時去除console的方法實現(xiàn)

    Vite打包項目時,需要去除開發(fā)時加入的console、debugger調(diào)試信息,本文主要介紹了Vite打包時去除console的方法實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2024-08-08
  • Vue學習筆記進階篇之過渡狀態(tài)詳解

    Vue學習筆記進階篇之過渡狀態(tài)詳解

    本篇文章主要介紹了Vue學習筆記進階篇之過渡狀態(tài)詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • Vue2實現(xiàn)組件props雙向綁定

    Vue2實現(xiàn)組件props雙向綁定

    這篇文章主要為大家詳細介紹了如何在Vue2中實現(xiàn)組件props雙向綁定,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • 使用electron-builder將項目打包成桌面程序的詳細教程

    使用electron-builder將項目打包成桌面程序的詳細教程

    這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下
    2024-08-08
  • vue項目中使用tinymce編輯器的步驟詳解

    vue項目中使用tinymce編輯器的步驟詳解

    本文分步驟給大家介紹了vue項目中使用tinymce編輯器的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-09-09
  • 基于Vuex無法觀察到值變化的解決方法

    基于Vuex無法觀察到值變化的解決方法

    下面小編就為大家分享一篇基于Vuex無法觀察到值變化的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue watch 偵聽對象屬性詳解

    Vue watch 偵聽對象屬性詳解

    Vue的watch偵聽器格式有兩種:方法格式和對象格式的偵聽器,這篇文章主要介紹了Vue watch 偵聽對象屬性相關(guān)知識,需要的朋友可以參考下
    2023-04-04
  • vue3中的對象時為proxy對象如何獲取值(兩種方式)

    vue3中的對象時為proxy對象如何獲取值(兩種方式)

    使用vue3.0時,因為底層是使用proxy進行代理的所以當我們打印一些值得時候是proxy代理之后的是Proxy<BR>對象,Proxy對象里邊的[[Target]]才是真實的對象,那么如何獲取這個值呢,下面下面給大家介紹兩種方式,感興趣的朋友一起看看吧
    2023-01-01
  • 簡單說說如何使用vue-router插件的方法

    簡單說說如何使用vue-router插件的方法

    這篇文章主要介紹了如何使用vue-router插件的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • Vue?插件及瀏覽器本地存儲

    Vue?插件及瀏覽器本地存儲

    這篇文章主要介紹了Vue?插件及瀏覽器本地存儲,插件通常用來為Vue添加全局功能,包含install方法的一個對象。更多相關(guān)介紹,需要的小伙伴可以參考下面文章內(nèi)容
    2022-05-05

最新評論