//HomeSwiper.Vue
<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

<script>
export default {
  name: "HomeSwiper",
  data() {
    return {
      swiperOption: {}
    };
  }
};
</script>

//Home.Vue
<template>
  <div>
    <home-header></home-header>
    <home-swiper></home-swiper>
  </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
export default {
  components: { HomeHeader, HomeSwiper }
};
</script>

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import fastClick from 'fastclick' //解决移动端300ms点击延迟
import VueAwesomeSwiper from 'vue-awesome-swiper' //引入轮播插件
import 'styles/reset.css'//引入样式初始化文件
import 'styles/border.css'//解决移动端1px边框问题
import 'styles/iconfont.css'//引入iconfont
import 'swiper/dist/css/swiper.css'