Блог

Я пытаюсь заставить работать шаблон 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> работает хак (обратите внимание на тире «-«), если ниже он объявлен без?

Это не работает, потому что вы ничего не экспортируете в свой файл vue.

Попробуйте это в вашем файле TopMenu.vue:

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

<script>
    export default {
    }
</script>
  

Также измените html <topmenu></topmenu> на <top-menu></top-menu>

Что касается вашего второго вопроса, HTML не чувствителен к регистру, поэтому ваши компоненты заголовка не будут совпадать с тегами html. Итак, Vue переводит ваши компоненты заголовка в «регистр тире». Из самой документации есть объяснение, почему:

Обратите внимание, что Vue не применяет правила W3C для имен пользовательских тегов (все в нижнем регистре, должны содержать дефис), хотя следование этому соглашению считается хорошей практикой.

Вы можете прочитать больше из документации