1.安裝

npm install vue-swipe

2.main.js中

import { Swipe, SwipeItem } from 'vue-swipe';

//注冊(cè)輪播圖
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

3.banner.vue

<template>
    <swipe class="my-swipe">
        <swipe-item class="slide1"></swipe-item>
        <swipe-item class="slide2"></swipe-item>
        <swipe-item class="slide3"></swipe-item>
    </swipe>
</template>
<script>
export default {
   
}
</script>
<style lang="scss">
@import 'vue-swipe/dist/vue-swipe.css';
.my-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}

.slide1 {
  background-color: #0089dc;
  color: #fff;
}

.slide2 {
  background-color: #ffd705;
  color: #000;
}

.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}
</style>

4. index.vue

<banner></banner>
<script>
import banner from './banner.vue'

export default {
    components: {
        banner: banner
    },
    data () {
        return {

        }
    }
}
</script>