对.vue扩展感到困惑 - “未知的自定义元素：<topmenu>”

Question

我尝试使用电子vue样板。设置项目后一切正常，但是当我创建一个新的.vue文件（TopMenu.vue）时，我得到：

vue.common.js?4eb4:2569 [Vue warn]: Unknown custom element: <topmenu> -
did you register the component correctly? For recursive components, make 
sure to provide the "name" option. (found in component <landing-page>)

我使用确切的语法作为样板文件附带的原始.vue文件：

LandingPageVue.vue：

<style scoped>
  img {
    margin-top: -25px;
    width: 450px;
  }
</style>

<template>
  <div>
    <!-- <img src="./LandingPageView/assets/logo.png" alt="electron-vue"> -->
    <h1>Welcome.</h1>
    <topmenu></topmenu>
    <current-page></current-page>
    <versions></versions>
    <links></links>

    <div class="container">

    </div>
</template>


<script>
  import TopMenu from './LandingPageView/TopMenu'
  import CurrentPage from './LandingPageView/CurrentPage'
  import Links from './LandingPageView/Links'
  import Versions from './LandingPageView/Versions'

  export default {
    components: {
      TopMenu,
      CurrentPage,
      Links,
      Versions
    },
    name: 'landing-page'
  }
</script>

TopMenu.vue（我的档案）：

<template>
  <p>
    TOPMENU
  </p>
</template>

顺便说一句，黑客如何<current-page></current-page>工作（注意“ - ”破折号），如果声明它没有声明？

Answer 1

它不起作用，因为您没有在vue文件中导出任何内容。

在TopMenu.vue文件中尝试此操作：

<template>
  <p>
    TOPMENU
  </p>
</template>

<script>
    export default {
    }
</script>

同时将html <topmenu></topmenu>更改为<top-menu></top-menu>

对于您的第二个问题，HTML不区分大小写，因此您的标题案例组件与html标记不匹配。所以Vue将你的标题案例组件翻译成'破折号'。 从文档本身可以解释原因：

  

请注意，Vue不会对自定义标记名称强制执行W3C规则（全小写，必须包含连字符），但遵循此约定被视为良好做法。

您可以从docs

中了解更多信息