Vue · swiper、vue-awesome-swiper

1、安装
swiper4

npm install swiper vue-awesome-swiper --save

或指定swiper3

//直接安装版本3即可，自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S

//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S

2、引入模块
页面引入即可，没必要全局引入，很少所以页面都要使用轮播的。全局引入只会增加额外的加载缓存和加载速度。

全局引入（两个版本没有差别）

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

本地引入
swiper4

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
 
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}
</script>

swiper3

<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
};
</script>

3、页面调用
swiper4

<template>
  <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>
</template>
 
<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          // Some Swiper option/callback...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script> 

swiper3

<template>
  <div class="app-container">
    <div class="swiper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide
          v-for="item in 5"
          :key="item"
          :style="{backgroundImage: 'url('+require('@/assets/img/swiper-img.png')+')'}">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
//导入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'carrousel',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',    //与slot="pagination"处 class 一致
          clickable: true,            //轮播按钮支持点击
        }
      }
    };
  },

};
</script>

<style lang="scss" scoped>
.app-container{
  .swiper{
    width: 100%;
    
    &>>>.swiper-container {
      width: 100%;

      .swiper-slide {
        width: 100%;
        height: 0;
        padding-bottom: 28.1%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;

        /* 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;
      }

      .swiper-pagination{
        .swiper-pagination-bullet-active{
          background-color: #F29B76;
        }
      }
    }
  }
}
</style>

错误解决

报错：npm install --save swiper/dist/css/swiper.css

在main.js中引入import ‘swiper/dist/css/swiper.css’，会出现找不到css的报错。因为在swiper 升级6.0后，因为版本不同，项目目录变了，点开node安装文件夹只能找到’swiper/swiper-bundle.css’。

查看swiper版本，高于6.0.0引入样式方式；
import ‘swiper/swiper-bundle.css’

低于6.0.0引入样式方式
import ‘swiper/css/swiper.css’

以上两种方式可以基本解决vue引入swiper会报错的原因。

vue-awesome-swiper使用的各种坑

1、用swiper-bundle.css会出现分页器不生效
需要降低swiper版本了，使用5.4.5的版本

2、要么版本对不上，要么swiper.css引用地址不对，要么swiper-pagination不显示，要么自动轮播失效。
需要使用3.1.3，目前这个版本最稳定

参考
npm库：vue-awesome-swiper
swiper
github的vue-awesome-swiper的官方示例