vue中使用swiper

npm install vue-awesome-swiper
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper, /* { default global options } */)

//--------------------------------------------
組件內部
<template>
<Layout>
    <Content>
        <div class="main-content">
            <div class="master-graph">
              <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="swiperEvent" style="height:670px">
                <!-- slides -->
                <swiper-slide><img src="https://static.banbooyun.com/public/img/indexadmin/banner2.png"></swiper-slide>
                <swiper-slide><img src="https://static.banbooyun.com/public/img/indexadmin/banner1.png" ></swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination" slot="pagination"></div>
                <!-- <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>
                <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
              </swiper>
            </div>
                </div>
            </div>
        </div>
    </Content>

</Layout>
    
</template>

<script>
import Cookies from 'js-cookie'
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data() {
    return {
      islogin: Cookies.get("user") ? true : false,
      swiperOption:{
          pagination:{
            el: '.swiper-pagination'
          },
          autoplay: {
					  delay: 2000
          },
          paginationClickable: true,
          speed: 800,
          loop: true,
          observer:true,
          observeParents:true,
          autoplayDisableOnInteraction : false,
      }
    };
  },
  computed:{
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {
    console.log(Cookies.get("user") ? true : false);
  },
  mounted() {
    // current swiper instance
    // 然後你就可以使用當前上下文內的swiper對象去做你想做的事了
    console.log('this is current swiper instance object', this.swiper)
    this.swiper.slideTo(1, 1000, false)
  },
  methods:{
    swiperEvent(){
      console.log();
    }
  },
  components:{
    swiper,
    swiperSlide
  }
};
</script>
<style lang="less" scoped>

</style>