Question

我有一个Vue.js应用程序。我正在尝试使用vue-charts包。我正在我的index.js文件中导入图表模块，如下所示：

import chartJS from 'chart.js';
import VueCharts from 'hchs-vue-charts';
Vue.use(VueCharts);

然后，在我的index.vue文件中，我有以下内容：

<template>
  <div class="page">
    <h2>Hello</h2>

    <chartjs-line></chartjs-line>
  </div>
</template>

<script>
    export default {
        data() {
            return {};
        }  
    };
</script>

单词“Hello”看起来很好。出于这个原因，我知道我的应用程序已正确安装。但是，图表不会出现。当我查看devtools窗口时，我看到以下错误：

未知的自定义元素： - 您是否正确注册了该组件？对于递归组件，请确保提供“名称”选项。

我假设在调用Vue.use时，组件将被注册。但是，我显然做错了。然而，我不确定是什么。如何在单个文件组件中使用vue-charts组件？

Answer 1

基于How to use in vue components of webpack?看起来vue-charts并不完全支持webpack导入，您必须通过window.VueCharts引用它。

import 'chart.js';
import 'hchs-vue-charts';

Vue.use(window.VueCharts);

Vue.js - 通过Webpack注册图表组件

1 个答案: