在单个文件组件中使用 Vue.js 插件

Question

我想使用vue-chartkick 插件，但想在我的单文件组件中注册它而不是全局使用它。有没有办法实现和

一样

Vue.use(VueChartkick, { Chartkick })

在单文件组件中？我尝试导入插件，然后将其注册为组件，但它一直告诉我未定义相应的组件。这是我的单文件组件：

<template lang="pug" >
div
    area-chart(:data="monthlyRevenue")              
</template>
<script>

import Api from '../../../api';
import Chartkick from 'chartkick';
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js';

export default {
    name: 'reporting',
    components: {
        'area-chart': AreaChart
    },
    data() {
        return {
            monthlyRevenue: {}
        }
    },
    created() {
        Api.get(window.location.pathname)
          .then((response) => {
            this.monthlyRevenue = response.body;
          })
          .catch((response) => {
            this.handleErrors(response.body);
          });
    }
}
</script>

Answer 1

您需要创建一个新的 Vue 对象并将其声明为单个文件组件中的一个组件。我对 VueChartKick 不太熟悉。但这可能会奏效。

<template lang="pug" >
div
    area-chart(:data="monthlyRevenue")              
</template>
<script>

import Vue from 'vue';
import Api from '../../../api';
import Chartkick from 'chartkick';
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js';

// attach your other plugins in here as required
Vue.use(VueChartkick, {Chartkick});
const newCustomComponent = new Vue();

export default {
    name: 'reporting',
    components: {
        'area-chart': AreaChart,
        newCustomComponent: newCustomComponent,
    },
    data() {
        return {
            monthlyRevenue: {}
        }
    },
    created() {
        Api.get(window.location.pathname)
          .then((response) => {
            this.monthlyRevenue = response.body;
          })
          .catch((response) => {
            this.handleErrors(response.body);
          });
    }
}
</script> 

Answer 2

在你的 ma​​in.js 文件中添加插件初始化：

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