为什么我的组件没有在 App.vue 中导入？答案

【问题标题】：Why is my component not importing inside App.vue?为什么我的组件没有在 App.vue 中导入？
【发布时间】：2019-06-20 20:03:56
【问题描述】：

我试图在页面加载期间显示脉冲加载器。我从下面的代码中得到两个错误。

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to='/'><div v-if="$route.name=='home'" class='activeLink'>Home</div></router-link>
      <pulse-loader :loading=this.loading></pulse-loader>
    </div>
    <keep-alive include="home">  </keep-alive>
    <router-view />

  </div>
</template>

<script>
import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
export default {
  data() {
    return {
      loading: true
    }
    components: {
      PulseLoader
  }
  },
  methods: {
    getLoadingStatus() {
      $(window).on('load', function(){
        this.loading=false;
        });
    },
  },
  mounted() {
    this.getLoadingStatus()
  },
};
</script>

错误：

Unknown custom element: <pulse-loader> - did you register the component correctly

ReferenceError: $ is not defined

这是在一个从 vue cli 创建的原版 vue.js 项目中。

【问题讨论】：

我认为你的路径可能是错误的 'vue-spinner/src/PulseLoader.vue'。如果您的组件与 App.vue 位于同一位置，请尝试仅放置“./PulseLoader.vue”
检查路径'vue-spinner/src/PulseLoader.vue'。如果您确定这是正确的，您可以发布该文件的代码吗？
关于“ReferenceError: $ is not defined”，你的项目中没有定义 jQuery。

标签： javascript vue.js

【解决方案1】：

注册组件不是在数据中完成的，而是自己完成的。

  data() {
    return {
      loading: true
    }
    components: {
      PulseLoader
     }
  },

应改为：

  components: {
      'pulse-loader': PulseLoader  // name the component here what you want to name your custom tag
  },
  data() {
    return {
      loading: true
    }
  },

【讨论】：

【解决方案2】：

尝试将您的标签更改为<PulseLoader>。无论是那个还是

components: {
  pulseLoader: PulseLoader
}

我的理解是Vue会将camelCase翻译成kebab-case，但不会把PascalCase翻译成kebab-case。

看起来你还需要 jQuery ($ is not defined)

【讨论】：