将组件添加到默认的vue-cli webpack应用程序

Question

为了重现性：首先，我使用vue-cli创建了一个默认项目，如下所示：

npm install -g vue-cli
vue init webpack spa
cd spa
npm install
npm run dev

从那时起，我决定首先用app-header组件替换Vue徽标。我写了这样的代码：

我首先在components文件夹中创建了AppHeader.vue，并为它提供了一个模板，导出脚本和空样式。它有一个元素（我已尝试使用和不使用它）。我在App.vue中导入了AppHeader组件并在模板中使用它。

它没有显示出来。我唯一看到的是路由器视图中的HelloWorld组件。

我想我已经涵盖了所有的基础，但是有人看到我错过的东西吗？

Answer 1

您需要将文件App.vue的导出语句中的组件包含在components对象中。同时删除el上的name和AppHeader.vue。那一定一切都好。

App.vue：

export default {
  name: 'App',
  components: {
    AppHeader
  }
}

AppHeader.vue：

export default {
  data() {
    return {
      title: "Header"
    }
  }
}