Javascript 未知的自定义元素vuejs nuxtjs

我犯了一个错误

想知道我做错了什么。 我想制作可重用的组件，首先是一个按钮。 我在文件路径中创建：/components/MusicPlayer.vue:

<template>
  <div>
    <v-btn @click="playMusic">
      I am a button
    </v-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      test: require('@/assets/YES.mp3')
    }
  },
  methods: {
    playMusic () {
      const pav = new Audio(this.test)
      pav.play()
    }
  }
}
</script>

<style>
#MusicPlayer{
    background: red;
}
</style>

我是一颗纽扣
导出默认值{
数据（）{
返回{
测试：需要（“@/assets/YES.mp3”）
}
},
方法：{
播放音乐（）{
const pav=新音频（this.test）
pav.play（）
}
}
}
#音乐播放器{
背景：红色；
}

然后，我尝试根据需要在布局路径/layouts/LoggedIn.vue中导入和导出：

<template>
  <v-app id="Logged-In-Layout">
    <transition
      name="view"
    >
      <router-view />
    </transition>
    ...  <- some code -> ...
    </v-app-bar>
    <v-btn id="scroll-to-top-btn" fab color="pink" @click="scrollToTop">
      <v-icon>mdi-arrow-up-bold-outline</v-icon>
    </v-btn>
    <Player id="ricardo" />     <--- my custom component here.
  </v-app>
</template>
<script>
import { MusicPlayer } from '@/components/MusicPlayer.vue'
export default {
  components: {
    Player: MusicPlayer
  },
  data: () => ({
    dialog: false,
    drawer: false
  }),
  methods: {
    scrollToTop () {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

...   ...
mdi向上箭头粗体轮廓
({
对话：错，
出票人：错
}),
方法：{
scrollToTop（）{
滚动窗口({
排名：0，
左:0,，
行为：“平滑”
})
}
}
}

不管我放Player:MusicPlayer还是“otherName”：MusicPlayer，甚至仅仅是MusicPlayer，仍然不起作用。必须出现的按钮是0x0 px。试着用一个塑料袋包装

---

import{MusicPlayer}应该是import MusicPlayer，不带大括号5分钟前的裙子

---

成功了。

import{MusicPlayer}

应该是

import MusicPlayer

，没有大括号。该死的@skille你是个魔术师，谢谢，成功了！