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

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

无法安装组件：模板或渲染功能未定义。（Vue使用插件）

1 个答案:

无法安装组件：模板或渲染功能未定义。 （Vue使用插件）

1 个答案:

无法安装组件：模板或渲染功能未定义。（Vue使用插件）