Vue 3 导入/解析组件的问题答案

【问题标题】：Vue 3 issues importing / resolving componentVue 3 导入/解析组件的问题
【发布时间】：2021-11-27 05:07:52
【问题描述】：

您好，刚接触 Vue 并通过教程学习。我创建了一个组件 Header.vue 并尝试将其导入 App.vue。这是结构： code structure

这里是 App.vue：

<template>
  <Header />
</template>

<script>
import Header  from "./components/Header.vue";

export default {
  setup() {
    return {
      Header,
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Fira Sans", sans-serif;
}
body {
  background: #eee;
}
</style>

这里是 Header.vue 组件：

<template>
  <div>
    <h1>Income Tracker</h1>
    <div class="total-income">$0</div>
  </div>
</template>

<script>
export default {

};
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background-color: #313131;
  border-bottom: 5px solid #ffce00;
}
header h1 {
  color: #eee;
  font-size: 28px;
}
header .total-income {
  font-family: "Fira Code", "Fira Sans", sans-serif;
  background-color: #ffce00;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  padding: 5px 10px;
  min-width: 100px;
  text-align: center;
  border-radius: 8px;
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);
}
</style>

我从 App.vue 获取样式，但组件没有解析。在控制台中，我收到此错误： error message

我尝试的是堆栈溢出和基于错误消息文本的谷歌搜索。

要么我没有正确搜索，要么我目前没有足够的经验来确定导致此问题的问题。

非常感谢您提供有关如何解决此问题的教育。

【问题讨论】：

我建议不要使用 Header 作为组件名称，因为它可能与 HTML header element 冲突。这违反了very first rule in the Vue Style Guide。
我认为本教程是一个小怪人.. 已经学到了更多在这里解决问题的前 4 分钟。

标签： javascript vue.js components

【解决方案1】：

您需要在components 选项中注册组件。

export default {
  components: {
    Header,
  },
};

见the docs。

请注意，在 JavaScript 对象中包含无值条目（例如 Header）是 Header: Header 的 ES6 语法。

【讨论】：

谢谢。您的解决方案带来了文本，这意味着组件导入现在可以工作。由于某种原因，组件样式现在没有显示，但
和
显示。进一步感谢您的帮助。
没问题。直接进入事情很好，因为这是一种很好的学习方式，但在某些时候我会建议阅读整个Vue docs。它们很棒，您应该经常引用它们。

【解决方案2】：

你需要使用这样的组件

<template>
  <header />
</template>

<script>
import Header  from "./components/Header.vue";

export default {
    components: {
        "header": Header
    },
  setup() {
    return {
      Header,
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Fira Sans", sans-serif;
}
body {
  background: #eee;
}
</style>

【讨论】：

Jay Patel 谢谢你.. 但使用“标题”：标题不起作用。结合您的代码结构和@Ders 的回答，我也能够将其向前推进。
它可以查看模板标签并相应地更改它，如
。

【解决方案3】：

在您的 Header.vue 中，将您的 div 标签替换为 header 标签，因为您在 CSS 中设置了 header 标签的样式，而不是 div 标签。

<template>
  <header>
    <h1>Income Tracker</h1>
    <div class="total-income">$0</div>
  </header>
</template>

【讨论】：

谢谢阿米特！每一个新的教育都有帮助。但它现在显示
和
但不显示组件样式。
在您的 Header.vue 中，您已经使用 CSS 元素选择器完成了样式设置，即
在您的情况下，但您没有在代码中使用该标签。所以在你的 Header.vue 中，用
标签改变你的父
标签。
name 不注册组件。它对调试很有用。
我的错！感谢@Ders 让我知道这一点。
Amit 和 @Ders 谢谢你们。

和 显示。进一步感谢您的帮助。

和 但不显示组件样式。

和
显示。进一步感谢您的帮助。

和
但不显示组件样式。