swiper在 vue中的引用

		<template>
	    <div id="PcHeader" >
	        <swiper :options="swiperOption" class="swiper-wrap"  ref="mySwiper" v-if="banner.length!=0" >
	            <swiper-slide v-for="(item,index) in banner" :key="index" >
	                <img :src="item.image" alt="" :style="lineWidth"/>
	            </swiper-slide>
	        </swiper>
	    </div>
	</template>
	
	<script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    export default {
        name: "PcHeader",
        comments:{
            swiper,swiperSlide
        },
        data(){
            return {
                /*获取可见区域宽度*/
                lineWidth:{
                    width:document.documentElement.clientWidth+"px"
                },
                banner:[
                    {image:require("../assets/images/banner1.jpg")},
                    {image:require("../assets/images/banner2.jpg")},
                    {image:require("../assets/images/banner3.jpg")},
                    {image:require("../assets/images/banner4.jpg")}
                ],
                imgIndex:1,
                swiperOption: {
                    //是一个组件自有属性，如果notNextTick设置为true，
                    // 组件则不会通过NextTick来实例化swiper，
                    // 也就意味着你可以在第一时间获取到swiper对象，
                    // 假如你需要刚加载遍使用获取swiper对象来做什么事，
                    // 那么这个属性一定要是true
                    notNextTick: true,
                    //循环
                    loop: true,
                    //设定初始化时slide的索引
                    initialSlide: 0,
                    //自动播放
                    autoplay: {
                        delay: 1500,
                        stopOnLastSlide: false,
                        /* 触摸滑动后是否继续轮播 */
                        disableOnInteraction: false
                    },
                    //滑动速度
                    speed: 800,
                    //滑动方向
                    direction: "horizontal",
                    //小手掌抓取滑动
                    grabCursor: true

                }
            }
        },
        methods:{

        }
    }
</script>

<style scoped lang="less">
    #PcHeader{
        font-size: 1.25rem;
        .el-row:nth-child(1){
            height:4rem;
            line-height:4rem;
        }

    }

	</style>

main文件的配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vueSwiper from 'vue-awesome-swiper'
import Vant from 'vant';
import 'vant/lib/index.css';
/* 样式的话，我这里有用到分页器，就在全局中引入了样式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);
Vue.use(Vant)
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')