laravel - 如何安装 vue-chartkick 并在我的组件中使用它？

Question

我正在使用vue-chartkickLaravel。我按照文档安装它。

npm install vue-chartkick chart.js

然后，在resources/js/app.js：

import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

...

const app = new Vue({
    el: '#app',
    router: router,
    vuetify: new Vuetify()
});

然后，当我放入<line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart>一个组件时，我在 javascript 控制台中收到以下错误：

[Vue warn]: Unknown custom element: <line-chart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Dashboard> at resources/js/components/backend/Dashboard.vue
       <VApp>
         <Root>

注册组件的正确方法是什么？

标签： laravelvue.jschart.js

Answer 1

只需使用 chart.js 2.9 版和 vue-chartkick 0.6.1

npm install vue-chartkick@0.6.1 chart.js@2.9 --save

并在 app.js 中导入，如下所示：

import {Chart} from 'chart.js'
import Chartkick from 'vue-chartkick'
Vue.use(Chartkick.use(Chart));