0

我尝试使用电子 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>顺便说一句，如果在下面声明它没有，黑客如何工作（注意“-”破折号）？

在此处输入图像描述

4

1 回答 1

2

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

在你的 TopMenu.vue 文件中试试这个：

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

<script>
    export default {
    }
</script>

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

对于您的第二个问题，HTML 不区分大小写，因此您的标题大小写组件与 html 标签不匹配。因此，Vue 将您的标题案例组件转换为“破折号”。从文档本身可以解释为什么：

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

您可以从文档中阅读更多信息

于 2016-10-06T11:26:41.777 回答