javascript - VueJS 3警告在'@/components/...vue'中找不到导出组件
问题描述
我正在使用 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
我有这个内容:
<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
拜托,你能帮我为什么我有这个警告并且我的内容来自<template>
inPictureBox
或 inPropertyBox
没有加载吗?非常感谢您的任何建议
解决方案
组件实例在其单个文件中作为默认 ( export default {...
) 导出,并且应该像这样导入:
import PictureBox from '@/components/PictureBox.vue'
代替:
import { PictureBox } from '@/components/PictureBox.vue'
推荐阅读
- ios - 是否可以有一个不覆盖整个屏幕的滚动视图?
- java - 是否可以使用 Spring Security 实时加载自定义配置文件?
- swift - 如何更改 Facebook 确认对话框项目名称?
- javascript - 提交表单前异步坐标抓取
- clojure - 如何为接受序列参数的函数编写 Clojure 规范?
- python - 同时更改两个 Python 列表的索引
- php - DataFixtures Symfony 3.3 SQLSTATE[23000]
- vhdl - 波纹进位加法器的 vhdl 程序显示有关未绑定组件实例的警告
- python - 在 python 源 (.py) 文件中搜索和编辑行
- c# - 省略任何重复 ID 的 LINQ 查询