VUE加载Swiper插件

1、首先使用npm命令行工具安装Swiper
npm install swiper --save-dev

2、在需要使用swiper的.vue文件中，引入Swiper
import Swiper from ‘swiper’;
import ‘swiper/dist/css/swiper.min.css’;
需要注意，上面两段代码是写在script标签内部的。

3、HTML内容

<div class="banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner,id) in bannerList" :key="id">
                <router-link :to="banner.link">
                <img :src="banner.src">
                </router-link>
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
</div>

4、在JS中实例化Swiper

export default {
    mounted(){
        new Swiper('.banner .swiper-container', {
            autoplay:true,
            loop:true,
            pagination: {
            el: '.swiper-pagination',
            },
        })
    },
    data(){
        return{
            bannerList:[
                {id:0,link:"/", src:require('../../assets/images/banner1.jpg')}//本地图片路径地址
            ]
        }
    },
}