在 vue 3 中导入组件

Posted 2023-02-23

【中文标题】在 vue 3 中导入组件

【英文标题】：importing a component in vue 3

【发布时间】：2022-01-09 09:22:34

【问题描述】：

您好，我正在尝试在 Vue 3 中导入一个组件。 这是我的组件结构：

+src
  +App.vue
  +components
    +Navbar.vue

在我的 App.vue 中我尝试过：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<Navbar/>
</div>
</template>
<script>
import  Navbar  from './components/Navbar.vue';
</script>

这是我的 main.ts ：

import  createApp  from 'vue'
import router from './router'

import mitt from 'mitt';
const emitter = mitt();

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
import BootstrapVue3 from 'bootstrap-vue-3'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.use(BootstrapVue3)
app.mount('#app')
app.config.globalProperties.emitter = emitter;

但我收到此错误：

Already included file name '/home/jip/Projects/snippedit/client/src/components/Navbar.vue' differs from file name '/home/jip/Projects/snippedit/client/src/components/navBar.vue' only in casing.
  The file is in the program because:
    Imported via './components/Navbar.vue' from file '/home/jip/Projects/snippedit/client/src/App.vue'
    Root file specified for compilation
    Root file specified for compilation

有人知道这个问题的解决方案吗？ 提前致谢。

【问题讨论】：

导入应该在<script setup>部分内

我试过没有帮助。

你main.js的内容是什么？通常，您不会在组件中导入vue.js，而是在main.js中导入

我已将其添加到我的帖子中。

main.js 看起来不错。你试过没有App.vue 中的第一个<script> 标签吗？

【参考方案1】：

App.vue 应该是这样的：

<template>
<div>
<Navbar/>
</div>
</template>
<script setup>
import  Navbar  from './components/Navbar.vue';
</script>