1、下載vue-awesome-swiper

npm i --s vue-awesome-swiper

2、在main.js引入

import vueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(vueAwesomeSwiper);

3、直接上案例，新建一個路由頁面

<template>
  <div class="hello-world">
    <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide" v-for="(item, index) in list" :key="index">
        <div class="page">
          <h3>第{{item}}頁</h3>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'HelloWorld',
  data() {
    return {
      list: [], //輪換列表
      swiperOption: {
        notNextTick: true,//notNextTick是一個元件自有屬性，如果notNextTick設定為true，元件則不會通過NextTick來例項化swiper，也就意味著你可以在第一時間獲取到swiper物件，假如你需要剛載入遍使用獲取swiper物件來做什麼事，那麼這個屬性一定要是true
        direction: 'vertical',//水平方向移動
        grabCursor: true,//滑鼠覆蓋Swiper時指標會變成手掌形狀，拖動時指標會變成抓手形狀
        setWrapperSize: true,//Swiper使用flexbox佈局(display: flex)，開啟這個設定會在Wrapper上新增等於slides相加的寬或高，在對flexbox佈局的支援不是很好的瀏覽器中可能需要用到。
        autoHeight: true,//自動高度。設定為true時，wrapper和container會隨著當前slide的高度而發生變化
        slidesPerView: 1,//設定slider容器能夠同時顯示的slides數量(carousel模式)。可以設定為數字（可為小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量。loop模式下如果設定為'auto'還需要設定另外一個引數loopedSlides。
        mousewheel: true,//開啟滑鼠滾輪控制Swiper切換。可設定滑鼠選項，預設值false
        mousewheelControl: true,//同上
        height: window.innerHeight, // 高度設定，佔滿裝置高度
        resistanceRatio: 0,//抵抗率。邊緣抵抗力的大小比例。值越小抵抗越大越難將slide拖離邊緣，0時完全無法拖離。本業務需要
        observeParents: true,//將observe應用於Swiper的父元素。當Swiper的父元素變化時，例如window.resize，Swiper更新

        // 如果自行設計了外掛，那麼外掛的一些配置相關引數，也應該出現在這個物件中，如下debugger
        //debugger: true,

        // swiper的各種回撥函式也可以出現在這個物件中，和swiper官方一樣
        on:{
          //監聽滑動切換事件，返回swiper物件
          slideChange: ()=>{
            let swiper = this.$refs.mySwiper.swiper;
            console.log(swiper.activeIndex); //滑動列印當前索引
            if(swiper.activeIndex === this.list.length - 1){ //到最後一個載入更多資料
              let newList = [];
              let listLength = this.list.length;
              for(let i = 0;i < 10;i++){
                newList.push(listLength + i);
              }
              this.list = this.list.concat(newList);
            }
          }
        }
      }
    }
  },
  created(){
    //從後臺獲取資料
    this.list = [0,1,2,3,4,5,6,7,8,9];
  },
  // 如果你需要得到當前的swiper物件來做一些事情，你可以像下面這樣定義一個方法屬性來獲取當前的swiper物件，同時notNextTick必須為true
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted(){
    // this.swiper.slideTo(3, 1000, false); //手動跳到指定頁
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style scoped>
.swiper-slide{
  font-size: 24px;
  text-align: center;
  line-height: 100px;
}
.swiper-slide:nth-child(2n){
  background: skyblue;
}
.swiper-slide:nth-child(2n-1){
  background: seashell;
}
</style>