在单个文件组件中使用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

在您的main.js文件中添加插件初始化：

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