vue.js - 无法挂载组件 : template or render function not defined.(Vue 使用插件)

Question

我正在尝试使用此 countdown-timer/on-github在我的单文件组件之一中。
即使我像示例中提到的那样导入它，我也会收到此错误:

21:27:20.553 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <CircularCountDownTimer>
       <Visualization> at src/views/Visualization.vue
         <App> at src/App.vue
           <Root> vue.runtime.esm.js:619
    VueJS 17
    run es6.promise.js:75
    notify es6.promise.js:92
    flush _microtask.js:18

查找警告我发现以下页面:

vue-router-problem1
vue-router-problem2

我从中收集/尝试的内容:

更改 vue-cli 配置以使用运行时编译器(无更改)

22:02:49.722 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <CircularCountDownTimer>
       <Visualization> at src/views/Visualization.vue
         <App> at src/App.vue
           <Root> vue.esm.js:628
    VueJS 18
    run es6.promise.js:75
    notify es6.promise.js:92
    flush _microtask.js:18

在 Main.js 中使用 Vue.use(Plugin) 导入(同样的错误)

在路由器组件中导入(同样错误)

编辑:
我也看过这个问题 nested-components in vuejs
并像这样更改了组件注册:

    beforeCreate() {
      this.$options.components.CircularCountDownTimer = require('vue-circular-count-down-timer')
    },

以上都没有使这个插件对我有用，我真的不明白为什么。

这是我的代码:

主文件

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import CircularCountDownTimer from "vue-circular-count-down-timer";

    Vue.use(CircularCountDownTimer)

    Vue.config.productionTip = false;

    export const eventBus = new Vue();

    new Vue({
      router,
      render: h => h(App)
    }).$mount("#app");

组件(Visualization.vue):

<template>
  <div id="content">
    <circular-count-down-timer
      v-for="counter in counters" :key="counter.id"
      :initial-value="counter.seconds"
      :show-minute="false"
      :show-hour="false"
      :show-negatives="false"
      :second-label="counter.name"
      :steps="1"
    />
  </div>
</template>
<script>
import CircularCountDownTimer from "vue-circular-count-down-timer";
export default {
  name: "Visualization",
  components: {
    CircularCountDownTimer
  },
  data() {
    return {
      counters: []
    }
  },
  mounted() {
    if (localStorage.getItem("delays")) {
      try {
        this.counters = JSON.parse(localStorage.getItem("delays"));
      } catch (e) {
        console.debug(e);
        localStorage.removeItem("delays");
      }
    }
  }
};
</script>

这也是从 localStorage 读取时的数据:

[{"id":1,"seconds":"60","name":"asdf"}]

package.json 中的依赖项:

    "dependencies": {
        "@babel/preset-env": "^7.5.4",
        "core-js": "^2.6.5",
        "vue": "^2.6.10",
        "vue-awesome-countdown": "^1.0.16",
        "vue-circular-count-down-timer": "^1.0.4",
        "vue-grid-layout": "^2.3.4",
        "vue-router": "^3.0.3"
      }

Answer 1

vue-circular-count-down-timer是一个插件，所以这段代码似乎是正确的:

import CircularCountDownTimer from "vue-circular-count-down-timer";

Vue.use(CircularCountDownTimer)

如果您查看插件的源代码，您会发现它所做的只是注册一个名为 circular-count-down-timer 的全局组件。 :

https://github.com/noorzaie/vue-circular-count-down-timer/blob/master/src/components/index.js

执行此操作时会出现问题:

import CircularCountDownTimer from "vue-circular-count-down-timer";
export default {
  name: "Visualization",
  components: {
    CircularCountDownTimer
  },

您只是再次导入插件，然后尝试将其用作组件。但它不是一个组件，它是一个插件。 Vue 不知道这一点，它只是看到一个没有 template 的对象。或 render功能。

摆脱本地组件导入，它应该只使用全局注册的组件。