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

Question

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

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

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

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

它没有出现。我唯一看到的是路由器 View 中的 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"
    }
  }
}