vue使用swiper遇到的坑

說說在vue中如何引用swiper

1.npm命令安裝swiper

npm install swiper --save-dev

2.在需要用到swiper插件的組件中引入swiper

  js中   import Swiper from "swiper"

  css中   @import "swiper/dist/css/swiper.css";

3.初始化swiper

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分頁器
    pagination: '.swiper-pagination',
    // 如果需要前進后退按鈕
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
   
  })        
  }
}

 

vue項目安裝完依賴，啟動項目的時候報如下錯

這是因為我們在引用swiper.css的路徑可能與現有的路徑不一致造成的，可以在node_modules文件下找到swiper文件夾，然后新建一個dist文件加上丟失的文件

1，從根本上看這個問題 應該是swiper版本號的問題，npm的版本沒有鎖定，造成安裝錯誤。

解決方法把npm的版本也鎖定一下：打開package.json文件找到swiper版本號，對照yarn.lock的版本號改一下

2，或者用 yarn來安裝依賴，它的版本鎖定不容易出問題。

 

參考：https://www.jianshu.com/p/df6e0fda6d8e