Vue 使用Swiper后，出现Unknown custom element: <swiper> 问题

Question

Vue 使用Swiper后，出现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 已经挂载上了
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进行了使用
});

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>

现在的问题是：如果我把Swiper结构直接放到Home.vue中，就是好使的。但是我把Swiper单独做成一个组件，由Home.vue组件引入进来后，就不好使了。

Answer 1

Vue.use不是那样用的

Vue.use( plugin ):

如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

你改成Vue.use(VueAwesomeSwiper)试试

还可以参考这里和这里