Перемещение компонента Vue в отдельный файл не может быть найдено основным компонентом приложения

Question

Я пытаюсь работать с этой песочницей кода для пакета NPM vue-fixed-header . В песочнице кода фиксированный заголовок находится в основном файле App.vue. Я пытаюсь изолировать его в свой собственный файл, перемещая все необходимые детали в компонент HelloWorld.vue внутри каталога component. После перемещения всего файла HelloWorld.vue выглядит так:

<template>
  <VueFixedHeader
    :threshold="propsData.threshold"
    :headerClass="propsData.headerClass"
    :fixedClass="propsData.fixedClass"
  >
    <nav>
      <el-menu>
        <el-menu-item style="pointer-events: none;" index="1">
          Fixed Header
        </el-menu-item>
      </el-menu>
    </nav>
  </VueFixedHeader>
</template>

<script>
  import VueFixedHeader from "vue-fixed-header";

  export default {
    name: 'fixedHeader',
    components: {
      VueFixedHeader,
    }
  }
</script>

...

Затем я пытаюсь импортировать этот файл для использования внутри App.vue:

<template>
  <div id="app">
    <fixedHeader /> <-- tried importing here
    ...
  </div>
</template>

<script>
import Vue from "vue";
import fixedHeader from './components/HelloWorld' <-- tried importing file here

...

Это не сработает, и Code Sandbox говорит, что fixedHeader is defined but never used.

Answer 1

Хорошей практикой всегда является определение компонентов vue с заглавными буквами.

1. Изменить имя компонента fixedHeader на FixedHeader (может работать без этого шага)
2. Используйте, как показано ниже:

<template>
  <div id="app">
    <fixed-header/> <-- tried importing here
    ...
  </div>
</template>

<script>
import FixedHeader from './components/HelloWorld'

export default {
  components: {
    FixedHeader
  }
}

Answer 2

<template>
  <div id="app">
    <fixedHeader /> <-- tried importing here
    ...
  </div>
</template>

<script>
import Vue from "vue";
import fixedHeader from './components/HelloWorld' <-- tried importing file here

export default{
  components: {
    fixedHeader,
  }
}
</script>