安裝外掛swiper

npm install vue-awesome-swiper --save

建立一個banner.vue的檔案

在banner.vue裡引用swiper

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.min.css';

html 

<template>
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in 1" v-if="banner==''">  //當banner為空時，預設一張圖片
          <img src="../assets/images/banner1.png" width="100%"  style="display:block;">
        </div>
        <div class="swiper-slide" v-for="item in banner" v-if="banner!=''">  //當banner不為空時，迴圈banner裡的資料
          <a :href="item.url">
            <div class="swiper-img flex3">
              <img :src="item.image" width="100%"   alt="banner" style="display:block;">
            </div>
          </a>
        </div>
      </div>
      <div class="swiper-pagination"></div>  //圖片的圓點  
    </div>
</template>
 

js

<script>
    import VueAwesomeSwiper from 'vue-awesome-swiper';   //引用swiper
    import 'swiper/dist/css/swiper.min.css';        //引用css
  export default{
    props:['banner'],    //首頁傳過來的資料
    mounted(){
      var mySwiper = new Swiper('.swiper1',{   
                pagination: '.swiper-pagination',
                autoplay: 3000,
                paginationClickable: true,
                centeredSlides: true,
                autoplayDisableOnInteraction: false,
                preventClicks: false,
                speed: 600,
                observer:true,
                loop: true,
                observeParents:true
       })
     
    }
  }
</script>
 

在首頁使用

html

<app-banner :banner="banner" ></app-banner>   //使用banner.vue的內容，把data裡的banner的資料傳遞過去

js

data(){
    return{
        banner:[{url:'http://123.com',image:'1.png'},{url:'http://123.com',image:'2.png'}]  //虛擬資料
    }
}

import Banner from '@/components/Banner'   //這裡指的是上面寫的banner.vue   在這裡可以不寫字尾

components: {
      'app-banner': Banner,  //使用上面的Banner.vue    這樣可以在html 裡直接使用<app-banner></app-banner> 就可以使用banner.vue裡的內容了
  },