Vue 使用Swiper后，出現(xiàn)Unknown custom element: <swiper> 問題

錯誤代碼圖示

程序代碼是這樣的：

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
// iconfont
import '@/assets/css/reset.css'
import '@/assets/css/iconfont.css'
// Swiper 已經(jīng)掛載上了
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.config.productionTip = false

let vm = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

Vue.use({
  vm,
  axios,
  VueAwesomeSwiper  //對Swiper進(jìn)行了使用
});

Home.vue

定義了一個Home組件，要在這個組件中載入一個Swiper組件

<template>
  <div class="home">
    Home
    <index-swiper></index-swiper>
  </div>
</template>

<script>
import IndexSwiper from './components/IndexSwiper'
export default {
  name: 'Home',
  components: {
    IndexSwiper
  }
}
</script>

<style scoped>
  .home{
      margin-top: 44px;
  }
</style>

IndexSwiper.vue

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <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>
  </div>
</template>

<script>
export default {
  name: 'IndexSwiper',
  data () {
    return {
      swiperOption: {}
    }
  }
}
</script>

<style scoped>
</style>

現(xiàn)在的問題是：如果我把Swiper結(jié)構(gòu)直接放到Home.vue中，就是好使的。但是我把Swiper單獨(dú)做成一個組件，由Home.vue組件引入進(jìn)來后，就不好使了。