Vue.js Vuejs-未能装载组件：未定义模板或渲染函数

我不确定我做错了什么。我得到以下错误：

控制台中的错误消息：

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

found in

---> <VueChartjs>
       <Chatjsvue> at src\components\vueChartjs\Chatjsvue.vue
         <App> at src\App.vue
           <Root>

App.vue

<template>
  <div id="app" class="container">
    <img src="./assets/logo.png" class="logo">

    <!-- chartjs -->
    <div class="chartjsvue">
      <Chatjsvue></Chatjsvue>
    </div>
    <div class="clear"></div>
    <!-- chartjs -->

  </div>
</template>

<script>
import Chatjsvue from '@/components/vueChartjs/Chatjsvue'

export default {
  name: 'App',
  components: {
    Chatjsvue
  }
}
</script>

<template src="../../views/chartjshtml/chartsjs.html"></template>

<script>
  import Chartjsvue from '@/assets/javascripts/chartjs'

  export default {
    components: {
      'vue-chartjs': Chartjsvue 
    }
  };
</script>

---

引用的错误是什么？需要做什么来解决它？

我认为问题在于您的

chartjs.js

是空的。您需要执行以下操作：

import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
export default {
  template: template
}

---

我认为问题在于你的

chartjs.js

是空的。您需要执行以下操作：

import template from './chartjs.html' // in your questions it's chartsjs.html, please help to correct it
export default {
  template: template
}

---

您的chartjs.js文件不应为空。它应该是一个具有可渲染模板的Vue组件。任何javascript都可以在脚本标记本身中编写

---

components对象应仅包含需要在当前组件中使用的vue组件列表。每个组件都必须有一个模板。

您的chartjs.js文件不应为空。它应该是一个具有可渲染模板的Vue组件。任何javascript都可以在脚本标记本身中编写

---

components对象应仅包含需要在当前组件中使用的vue组件列表。每个组件都必须有一个模板。

感谢所有参与回答的人。js文件不应为空。这是显示chartjs的所有图表的完整代码

main.js[src/main.js]

import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'

Vue.config.productionTip = false

require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { 
    App,
    ChartJsPluginDataLabels
  },
  template: '<App/>'
})

---

感谢所有参与回答问题的人。js文件不应为空。这是显示chartjs的所有图表的完整代码

main.js[src/main.js]

import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'

Vue.config.productionTip = false

require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { 
    App,
    ChartJsPluginDataLabels
  },
  template: '<App/>'
})

---

从'@/assets/javascripts/chartjs'导入Chartjsvue

，但

chartjs.js

为空？

从'@/assets/javascripts/chartjs'导入Chartjsvue

，但

chartjs.js

为空？

import Vue from 'vue'
import App from './App'
import router from './router'
import ChartJsPluginDataLabels from 'chartjs-plugin-datalabels'

Vue.config.productionTip = false

require('./assets/stylesheets/application.css')
require('./assets/javascripts/application.js')
require('./assets/javascripts/chartjs.js')


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { 
    App,
    ChartJsPluginDataLabels
  },
  template: '<App/>'
})

<template>
  <div id="app" class="container">
    <!-- chartjs -->
    <div class="chartjsvue tab-content active" id="tab2">
      <Chatjsvue></Chatjsvue>
    </div>
    <div class="clear"></div>
    <!-- chartjs -->
  </div>
</template>

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

<template src="../../views/chartjshtml/chartsjs.html"></template>

<script>
  import Chartjsbarvue from '@/assets/javascripts/chartjsbar'
  export default {
    components: {
      'vue-chartbarjs': Chartjsbarvue   
    },
    mounted(){
      console.log('Data is chartjs',this)
    },
    methods: {},
  }
</script>

<div class="wrapper">
  <div class="chart_header">chartjs bar chart</div>
  <vue-chartbarjs></vue-chartbarjs>
</div>

/*===================================================
    File: Chartsjsvue.vue
  ===================================================*/
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data () {
    return {
      datacollection: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            label: '1st Dataset hello',
            backgroundColor: 'rgba(52,65,84, 0.3)',
            bordercolor: '#344154"',
            hoverBackgroundColor: "#344154",
            data: [40, 20, 12, 39]
          },
          {
            label: '2nd Dataset',
            backgroundColor: 'rgba(130,191,163, 0.5)',
            bordercolor: '#82BFA3"',
            hoverBackgroundColor: "#82BFA3",
            data: [50, 70, 22, 55]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          datalabels: {
            display: false
          }
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.datacollection, this.options)
  }
}