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

Question

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

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

从那里开始，我决定将 Vue 徽标替换为 app-header 组件。我是这样写代码的：

我首先在 components 文件夹中创建了 AppHeader.vue，并为它提供了一个模板、导出脚本和空样式以进行良好的衡量。它有一个元素（我试过有没有它）。我在 App.vue 中导入了 AppHeader 组件，并在模板中使用。

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

我想我涵盖了所有的基础，但有人看到我错过了什么吗？

Answer 1

您需要将组件包含在文件App.vues 导出语句中，该语句包装为components 对象。同时删除AppHeader.vue 上的el 和name。那么一切顺利。

App.vue:

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

AppHeader.vue:

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