对 .vue 扩展感到困惑 - "Unknown custom element: <topmenu>"

Question

我试着开始使用 electron-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 将您的标题大小写组件转换为 'dash-case'。从文档本身可以解释为什么：

Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.

您可以从 docs

阅读更多内容

对 .vue 扩展感到困惑 - "Unknown custom element: <topmenu>"

Confused about .vue extensions - "Unknown custom element: <topmenu>"

templates

vue.js

electron

vue-router

vue-component