Vue.js Chartkick - 无法安装组件：未定义模板或渲染功能

Question

我是 vue.js 的新手，我不确定为什么会出现以下错误 - 非常感谢您的帮助。我认为问题可能出在 ChartkickCharts.vue 文件中，但不确定 - 您的建议会很有帮助

我得到的错误：

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

found in

---> <ChartkickCharts> at src\components\vueChartkick\ChartkickCharts.vue
       <App> at src\App.vue
         <Root>

App.vue

<template>
  <div id="app" class="container">

    <!-- chartkicks charts -->
    <div class="chartkickcharts">
      <ChartkickCharts></ChartkickCharts>
    </div>
    <!-- chartkicks charts -->

  </div>
</template>


<script>
import ChartkickCharts from '@/components/vueChartkick/ChartkickCharts'
export default {
  name: 'App',
  components: {
    ChartkickCharts
  }
}
</script>

ChartkickCharts.vue [components/vueChartkick/ChartkickCharts.vue]

<template src="../../views/chartkickhtml/chartkickcharts.html"></template>

<script>
    import ChartkickCharts from '@/assets/javascripts/chartkick'

    export default {
    components: {
      'line-chart': ChartkickCharts 
    },
    mixins:[ChartkickCharts],
      mounted(){
        console.log('Data is chartkick',this)
        },
  }
</script>

chartkickcharts.html [views/chartkickhtml/chartkickcharts.html]

<div class="wrapper">
  <div class="chart_header">chartkick line chart</div>
  <line-chart :data="chartData"></line-chart>
</div>

chartkick.js [assets/javascripts/chartkick.js]

import VueChartkick from 'vue-chartkick'

export default {
  components: {
    VueChartkick
  },

  data() {
    return {
      chartData: [
          ["Jan", 4], 
          ["Feb", 2], 
          ["Mar", 10], 
          ["Apr", 5], 
          ["May", 3]
        ],
      chartOptions: {
        chart: {
          title: 'Company Performance'
        }
      }
    }
  },
  mounted() {
    //this.datacollection
  }
}

Answer 1

您导入 chartkick.js 并将其用作 Vue 组件

components: {
  'line-chart': ChartkickCharts 
}

但在chartkick.js 中没有模板。 您可以尝试删除上面的组件声明，我认为没问题。