VueJS 3警告在'@/components/...vue'中找不到导出组件

Question

我正在使用 VueJS 3 应用程序，其中使用vue-router、vue和core-js应用程序，我想在其中使用组件。我的视图目录Home.vue文件如下所示：

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <div class="infobox">
        <PictureBox image="item.picture" />
        <PropertyBox itemProperty="item.properties" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'

export default {
  components: {
    PictureBox,
    PropertyBox,
  },
  methods: {
    addRow() {
      console.log('This add new row into table')
    },
  },
  setup() {
    const items = ref(data)

    return {
      items,
    }
  },
}
</script>

compoments我的目录中有 2 个组件

src/compoments
  |- PictureBox.vue
  |- PropertyBox.vue

例如，PictureBox.vue我有以下内容：

src/compoments
  |- PictureBox.vue
  |- PropertyBox.vue

但我在编译时有警告：

 WARNING  Compiled with 2 warnings                                                          10:58:02 PM

 warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PictureBox' was not found in '@/components/PictureBox.vue'

 warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PropertyBox' was not found in '@/components/PropertyBox.vue'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.19.187.102:8080/

同样在浏览器开发人员模式下我有相同的警告：

我的目录结构如下所示：

我的main.js看起来像这里：

<template>
  <div class="infobox-item-picturebox">
    <img class="infobox-item-picturebox-image" :src="require(`@/static/${image}`)" alt="item.title" />
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  props: {
    image: {
      type: String,
    },
  },

  setup() {
    const state = reactive({
      count: 0,
    })

    return {
      ...toRefs(state),
    }
  },
}
</script>

和路由器页面（我没有使用路由器实际上看起来像这里）

 WARNING  Compiled with 2 warnings                                                          10:58:02 PM

 warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PictureBox' was not found in '@/components/PictureBox.vue'

 warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PropertyBox' was not found in '@/components/PropertyBox.vue'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.19.187.102:8080/

请您帮我看看为什么我会收到此警告，并且我的内容来自<template>inPictureBox或 inPropertyBox未加载？非常感谢您的任何建议

Answer 1

组件实例export default {...在其单个文件中作为默认值 ( ) 导出，并且应该像这样导入：

 import PictureBox  from '@/components/PictureBox.vue'

代替：

import { PictureBox } from '@/components/PictureBox.vue'