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

Question

我正在使用 VueJS 3 应用程序，使用 vue-router、vue 和 core-js 我想使用组件的应用程序。我在 views 目录 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中我有这个内容：

<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/

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

我的目录结构如下所示：

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/style.css'

createApp(App).use(router).mount('#app')

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

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

拜托，你能帮我看看为什么我有这个警告，而我在 PictureBox 或 PropertyBox 中的 <template> 的内容没有加载吗？非常感谢您的任何建议

Answer 1

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

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

而不是：

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

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

VueJS 3 Warn export compoment was not found in '@/components/...vue'

javascript

warnings

vue.js

vuejs3