为什么我不能再次将组件导入到VUE中？

Question

这是我的项目的结构

src
  components
         create.vue
         resume.vue
         service.vue
  shared
         header.vue
         menu.vue
         loader.vue
         footer.vue

这是我的加载器组件

<template>
    <div class="three col">
        <!-- <div class="loader" id="spinner"></div> -->
        <div class="loader" id="spinner-2">
          <span></span>
          <span></span>
          <span></span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Loader',
    
}
</script>

我已经导入了它，并在我的组件create.vue上运行

<template>
              <div v-show="formInfo.selectedId != ''">
                <h1 class="title">What's the name of your
                  <span>{{idName}}</span> ?
                </h1>
                <input
                type="text"
                class="form-control"
                v-model="formInfo.name"
                @keypress="onChangeName($event)"
                @keyup="onChangeName($event)"
                />
                <div class="loader-spinner" v-if="loading">
                  <ciev-app-loader>
                </div>
              </div>

</template>
<script>
import Loader from '../shared/loader.vue'

export default {
  data() {
    return {
      step: 1,
      specieName: "",
      breedName: "",
      animalName: "",
      breedId: 0,
      imageSelected: false,
      isFormCompleted: false,
      isBreedSelected: false,
      loading: false,
      isLoaderFinished: false,
      myTimeout: 0
    };
  },
  components: {
    'ciev-app-loader': Loader
  },

到目前为止，一切都很好，但是现在我想在我的组件resume.vue中重用组件加载器。我导入它并在模板中声明它，如下所示

<template>
      <div
        v-show="!displayUnknown"
        class="column"
        v-bind:class="{ paymentIsActive: 'payment' === selectedResume }"
        @click="onClickResume('payment')"
      >
        <label>
          <input
            type="radio"
            name="selectedResume"
            value="payment"
            v-model="selectedResume"
          />
          <i class="icon-card"></i>
        </label>
      </div>

    <div class="loader-spinner">
      <ciev-app-loader />
    </div>




</template>

<script>
import globalAxios from "axios";
import { isMobile } from "mobile-device-detect";
import Config from "./../../config.js";
import FileSaver from 'file-saver';
import { saveAs } from 'file-saver';
import Loader from '../shared/loader.vue'

export default {
  data() {
    return {
      step: 3,
      selectedResume: "",
      selectedCremationService: null,
      focusService: undefined,
      selectedServicePrice: 0.0,
      displayResume: false,
      displayUnknown: false,
      offer: "unknown",
      isMobile: isMobile ? true : false,
    };
  },
  components: {
    'ciev-app-loader': Loader
  },
</script>

Loader组件没有显示在模板中，尽管在浏览器中检查元素确实加载了它，并且它通过控制台返回以下错误"Vue warn:未知自定义元素：-您是否正确注册了组件?对于递归组件，请确保提供"name“选项。”

查看对相同错误的引用，我在导出组件时在组件porpio上声明了名称，但我想我已经在Loader中这样做了。我做错了什么？

提前感谢大家的宝贵时间和帮助。

Answer 1

在resume.vue组件中，根<div>似乎关闭不正确。请更正此错误，然后重试。

 <div
        v-show="!displayUnknown"
        class="column"
        v-bind:class="{ paymentIsActive: 'payment' === selectedResume }"
        @click="onClickResume('payment')"
      >
        <label>
          <input
            type="radio"
            name="selectedResume"
            value="payment"
            v-model="selectedResume"
          />
          <i class="icon-card"></i>
        </label>

    <div class="loader-spinner">
      <ciev-app-loader />
    </div>
</div>

Answer 2

仔细检查我的代码，错误是除了在脚本中声明带有导入组件的声明的components对象之外，我还在脚本的末尾将其重复声明为一个空对象，这就产生了错误。谢谢你的帮忙