主应用程序组件找不到将 Vue 组件移动到单独的文件中

Question

我正在尝试为NPM包vue-fixed-header使用此代码沙箱。在代码沙箱中，固定标头位于主App.vue文件中。我正在尝试通过将所有必要的部分移动到 component 目录中的 HelloWorld.vue 组件来将其隔离到自己的文件中。移动所有内容后，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
...

但这不起作用，代码沙箱说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>