swiper6 is very tricky, 4 is recommended! ! ! !

 

A series of pits caused by the version
Time: 2020.07.08 (time, version is very important-the origin of the pit)

In the past two days, I used swiper in vue to make carousel pictures. I just checked Baidu and found a post to refer to (the pit started ).

Pit 1
According to the installation method above, npm will install the latest vue-awesome-swiper (@4 ), the corresponding is swiper6, but there is no swiper6 document in China, which means that it is impossible to refer to the usage method, and it is difficult to find it online

The installation posture of the latest version of Pit 2 vue-awesome-swiper is like this:

npm install swiper vue-awesome-swiper --save

Compare vue-awesome-swiper version 3

npm install vue-awesome-swiper --save-dev

Without the golden eyes of the grandson monkey, you are likely to ignore the swimer (butterfly effect, causing a series of subsequent pits)

Pit 3
points : This is the most pit that everyone finds on the Internet. It hasn't been solved for a long time, and it may cause your friends to be irritable, haha

After installation, you look up how to use it on a certain level. Netizens generally suggest you use it like this

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
....

Then your vue will report an error to you, saying that swiper.css cannot be found, and then you continue to a certain extent, infinite pits. . .
Or you can check the path, then go to node_modules to find swiper, and find that there is no swiper. Then install a swiper

npm install swiper --save

However, you did not bring the version, npm installs swiper6 for you by default, and the path in the folder is different from swiper4, brothers.

This is the root of the problem. If you have not found the core of the problem, if you continue to a certain extent, it is estimated that it will not be a few days of hard work.

---

Correct use posture:

Installation (specified version)

npm install vue-awesome-swiper@3 --save-dev

Used in components

Here I post a simple way to use it on the page (run first), friends can copy and paste completely, and I simplified the complicated things. Version: [email protected], [email protected]

<template>
  <div class="recommendPage">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
};
</script>
<style scoped >
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 200px;
  background: pink;
}  
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>

---

to sum up:

1. Don’t copy blindly, and don’t pay attention to the differences between your own version and the online method
2. Don’t give up, stay calm when things happen, follow the vue error prompt to see node_modules to see the path in the plug-in package, it may be useful