nuxt.js swiper用法

//-------------------------------------------------
nuxt.config.js
npm install vue-awesome-swiper
  plugins: [
    '@/plugins/swiper',
    {src:'~/plugins/swiper.js',ssr:false},
  ],
//-------------------------------------------------
/plugins/swiper.js
export default () => {
    if (process.browser) {
        //console.log('瀏覽器端渲染');
        Vue.use(require('vue-awesome-swiper/dist/ssr'), /* { default global options } */)
    }else{
        //console.log("非瀏覽器端渲染");
    }
}

//組件中--------------------------------------------
<template>
  <Layout>
    <Header class="bgfff">
      <div id="navs" class="clearfix">
        <div class="mylogo">
          <nuxt-link to="/index2">
            <img src="https://yhc-static.oss-cn-shanghai.aliyuncs.com/public/img/welcome/logo.png">
          </nuxt-link>
          <span>斑駁智慧雲</span>
        </div>
        <div class="logins">
          <div class="index-login clearfix" v-if="!islogin">
            <a :href="$config.nowDomain+'/spw/#/login'">登錄</a>
            <a :href="$config.nowDomain+'/spw/#/login?toTag=isRegister'">註冊</a>
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
    </Header>
    <Content>
      <div class="main-content">
        <div class="master-graph">
          <no-ssr>
            <div v-swiper:mySwiper="swiperOption" @someSwiperEvent="swiperEvent">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(banner,index) in banners" :key="index">
                  <img :src="banner">
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
          </no-ssr>
        </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 {
  name: '',
  layout: 'welcomeIndex',
  data() {
    return {
      islogin: this.$cookies.get('user') ? true : false,
      banners: [
        'https://static.banbooyun.com/public/img/indexadmin/banner2.png',
        'https://static.banbooyun.com/public/img/indexadmin/banner1.png'
      ],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,//默認true
        },
        effect: 'fade',
        paginationClickable: true,
        speed: 800,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false
      }
    }
  },
  computed: {},
  created() {
    console.log(this.$cookies.get('user') ? true : false)
  },
  mounted() {
    //   setTimeout(() => {
    //     this.banners.push('/4.jpg')
    //     console.log('banners update')
    //   }, 3000)
    //   console.log(
    //     'This is current swiper instance object', this.mySwiper,
    //     'It will slideTo banners 3')
    //this.mySwiper.slideTo(3, 1000, false)
    // current swiper instance
    // 然後你就可以使用當前上下文內的swiper對象去做你想做的事了
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(1, 1000, false)
  },
  methods: {
    swiperEvent() {
      console.log()
    }
  }
}
</script>