vue-awesome-swiper轮播图插件引入没效果?

Question

在github中查看demo完整代码

rage.vue

<template>
        <!-- swiper -->
        <swiper :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        data() {
            return {
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                }
            }
        },
        components: {
            swiper,
            swiperSlide
        }
    }
</script>

vue-awesome-swiper网站

Answer 1

npm 安装完vue-awesome-swiper会生成两个文件

rage.vue中还要引入css

@import "~swiper/dist/css/swiper.css";