无法安装组件：未定义模板或渲染函数。 （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

• 使用 Vue.use(Plugin) 在 Main.js 中导入（同样的错误）
• 在路由器组件中导入（同样的错误）

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

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

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

这是我的代码：

main.js

    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 函数的对象。

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