如何解决“无法解析：App.vue 中的组件”

Question

我正在参考这个视频学习Vue3的组件.

\n

在此视频中的 6:37 左右，当导师创建 Header.vue 并编辑 App.vue 时，测试站点上显示了标头。\n我编写了相同的代码，但出现错误并且没有显示任何内容。

\n

任何帮助，将不胜感激。

\n

错误信息

\n

[Vue warn]: Failed to resolve component: Header \n  at <App>\n  runtime-core.esm-bundler.js?5c40:38\n

\n

代码

\n

[应用程序.vue]

\n

<template>\n  <Header />\n</template>\n\n<script>\nimport Header from \'./components/Header.vue\';\n\nexport default {\n  setup() {\n    return {\n      Header\n    }\n  }\n}\n</script>\n\n<style>\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: \'Fira Sans\', sans-serif;\n}\nbody {\n  background: #EEE;\n}\n</style>\n

\n

[标题.vue]

\n

<template>\n  <h1>Income Tracker</h1>\n  <div class="total-income">\xc2\xa50</div>\n</template>\n\n<script>\nexport default {\n    \n}\n</script>\n\n<style scoped>\nheader {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 15px 30px;\n  background-color: #313131;\n  border-bottom: 5px solid #FFCE00;\n}\nheader h1 {\n  color: #EEE;\n  font-size: 28px;\n}\nheader .total-income {\n  font-family: \'Fira Code\', \'Fira Sans\', sans-serif;\n  background-color: #FFCE00;\n  color: #FFF;\n  font-size: 20px;\n  font-weight: 900;\n  padding: 5px 10px;\n  min-width: 100px;\n  text-align: center;\n  border-radius: 8px;\n  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25);\n  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25);\n}\n</style>\n

\n

Answer 1

该Header组件未在 中正确注册App.vue。我相信您正在尝试从本地组件注册setup()，但目前不支持。

使用components选项在本地Header注册App.vue：

import Header from './components/Header.vue';

export default {
  components: {
    Header
  },

  setup() {
    // DON'T DO THIS
    //return {
    //  Header
    //}
  }
}

演示