vue-awesome-swiper的单独引入

我用的是 ： "vue-awesome-swiper":"^3.1.3"
单独引用必须注册两个swiper和swiperSlide

<swiper :options="swiperOption">
            <swiper-slide><img src="../assets/img/banner1.jpg"></swiper-slide>
            <swiper-slide><img src="../assets/img/banner2.jpg"></swiper-slide>
            <swiper-slide><img src="../assets/img/banner3.jpg"></swiper-slide>
</swiper>
<div class="swiper-pagination" slot="pagination"></div>

import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')

export default {
        data() {
            return {
                swiperOption: {
                    speed: 300,
                    spaceBetween: 15,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    notNextTick: true,
                    loop: true,
                    initialSlide: 0,
                    autoplay: {
                        delay: 3999,
                        disableOnInteraction: false
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    speed: 800
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        }
}

<style scoped>
    .swiper-container {
        margin-top: 10px;
    }

    .swiper-slide {
        max-width: 77%;
    }

    .swiper-slide img {
        width: 100%;
    }

    .swiper-slide>a>img {
        width: 100%;
    }

    .swiper-slide a {
        transition: 0.2s;
    }

    .swiper-slide a:hover {
        opacity: 1;
    }

    .swiper-pagination {
        text-align: center !important;
        width: 100%;
        margin-top: 10px;
        margin-top: -30px;
    }

    .swiper-pagination .swiper-pagination-bullet {
        width: 6%;
        height: 5px;
        background: #FFFFFF;
        border-radius: 0;
    }


    .swiper-button-prev {
        width: 40%;
        height: 100%;
        left: -450px;
        top: 0;
        border-radius: 0px;
        margin-top: 0;
        z-index: 99;
        transition: 0.2s;
    }

    .swiper-button-prev:before {
        content: '';
        position: absolute;
        width: 15px;
        height: 100%;
        left: 94%;

        top: 50%;
        margin-top: -180px;
    }

    .swiper-button-next {
        width: 40%;
        height: 100%;
        right: -450px;
        top: 0;
        border-radius: 0px;
        margin-top: 0;
        z-index: 99;
        transition: 0.2s;
    }

    .swiper-button-next:after {
        content: '';
        position: absolute;
        width: 15px;
        height: 100%;
        right: 94%;
        top: 50%;
        margin-top: -180px;
        transform: rotate(180deg);
    }

    .swiper-button-prev:hover,
    .swiper-button-next:hover {
        opacity: 1;
    }
</style>