vue项目中使用swiper遇到的坑-引入问题

vue项目引入swiper

swiper插件，版本不同，可能会引起引入方式以及参数设置有很大差别，很多坑都是因为版本不同造成的， 下面说下引入的问题

引入问题

网上搜到很多文章，都是直接如下图引入，看着非常简单，但是实际项目中，引入后项目启动就报错， 报类似如下错误 找了很久才找的一个能正确引入的文章，亲测有效 以使用版本 “swiper”: “^6.3.5”, “vue-awesome-swiper”: "^3.1.3"为例 安装

cnpm install swiper vue-awesome-swiper --save
// 如果还报错，可以安装指定版本，如下
npm install vue-awesome-swiper@6.3.5 --save

main.js引入

import VueAwesomeSwiper from vue-awesome-swiper

// import style (>= Swiper 6.x)
import swiper/swiper-bundle.css

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

使用

<swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide>
    <swiper-slide>Slide 5</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>

swiperOptions: {
          
   
  slidesPerView: 4,//显示个数
  direction: vertical,
   pagination: {
          
   
      el: .swiper-pagination
   },
}

computed: {
          
   
   swiper() {
          
   
      return this.$refs.mySwiper.swiper
   }
},
 mounted() {
          
   
    this.swiper.slideTo(3, 1000, false)
 }

以上代码中，mounted中‘this.swiper.slideTo(3, 1000, false)’这段代码也会报错，报swiper找不到，具体原因未知，该代码可以直接删掉

<style>
 .swiper-container {
          
   
    width: 1000px;
    height: 400px;
  }

  .swiper-slide {
          
   
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 400px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
</style>