相关代码：main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import fastClick from 'fastclick'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'styles/reset.css'

import 'styles/border.css'

import 'styles/iconfont.css'

import 'swiper/dist/css/swiper.css'

Vue.config.productionTip = false

Vue.use(VueAwesomeSwiper)

fastClick.attach(document.body)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

相关代码：home.vue

<template>

  <div>

    <home-header></home-header>

    <home-swiper></home-swiper>

    <div>test</div>

  </div>

</template>

<script>

import HomeHeader from './components/Header'

import HomeSwiper from './components/Swiper'

export default {

  name : 'Home',

  components:{

    HomeHeader,

    HomeSwiper

  }

  }

</script>

<style>

</style>

相关代码：Swiper.vue

<template>

 <div class="wrapper">

  <swiper :options="swiperOption">

    <swiper-slide>

      <img class="swiper-img" src="http://img1.qunarzz.com/sight/p0/2005/4f/4fa68e517ab1a4aba3.water.jpg_600x330_6c56404d.jpg">

    </swiper-slide>

    <swiper-slide>

      <img class="swiper-img" src="http://img1.qunarzz.com/tuan/team2/1507/2c/83e0e0e7ae082a.jpg_600x330_2285872d.jpg">

    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>

  </swiper>

 </div>

</template>

<script>

export default{

    name: 'HomeSwiper',

    data(){

      return {

        swiperOption:{

          pagination: '.swiper-pagination'

        }

      }

    }

}

</script>

<style lang="stylus" scoped>

  .wrapper

    overflow: hidden

    width: 100%

    height: 0

    padding-bottom: 31.25%

    .swiper-img

      width:100%

</style>

package.json

​