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

Question

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

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

从那里我决定开始用应用程序头组件替换 Vue 徽标。我这样写代码：

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

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

我想我涵盖了所有的基础，但是有人看到我遗漏了什么吗？

Answer 1

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

App.vue:

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

AppHeader.vue:

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

Adding components to default vue-cli webpack app