Unknown custom element: < swiper > problem occurs after Vue uses Swiper

Vue has a Unknown custom element: < swiper > problem after using Swiper

error code icon

the program code goes like this:

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: "-sharpapp",
  router,
  components: { App },
  template: "<App/>"
});

Vue.use({
  vm,
  axios,
  VueAwesomeSwiper  //Swiper
});

Home.vue

defines a Home component in which you want to load a Swiper component
<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>

the problem now is that if I put the Swiper structure directly into the Home.vue, it will work. But I made Swiper into a separate component, and when the Home.vue component was introduced, it didn"t work.

Mar.17,2021

Vue.use is not used that way

Vue.use (plugin) :

if the plug-in is an object, you must provide an install method. If the plug-in is a function, it will be used as an install method. When the install method is called, Vue is passed in as an argument.

change it to Vue.use (VueAwesomeSwiper) try

you can also refer to here and ide/plugins.html-sharp%E4%BD%BF%E7%94%A8%E6%8F%92%E4%BB%B6" rel= "nofollow noreferrer" > here

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3125c-4e9d5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3125c-4e9d5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?