javascript - vuejs注册组件问题

Question

我安装了 ApexChart通过

npm install vue-apexcharts

在我的 bootstrap.js 文件上，我将其导入为

import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)

在我的 app.js 文件 上，我导入了 bootstrap.js 文件

require('./bootstrap');
Vue.component('products', require('./components/ProductComponent.vue'));
Vue.component('employees', require('./components/EmployeesComponent.vue'));
Vue.component('orders', require('./components/OrdersComponent.vue'));
Vue.component('display-products', require('./components/DisplayProducts.vue'));
Vue.component('order-products', require('./components/OrderProductComponent.vue'));
Vue.component('dashboard', require('./components/DashboardComponent.vue'));

const app = new Vue({
    el: '#app'
});

我在我的 vue 文件上尝试过

<apexcharts width="500" type="bar" :options="chartOptions" :series="series"></apexcharts>

但是我得到了 你是否正确注册了组件？

我正在使用带有 vue js 的 laravel

编辑我做了一个 fiddle :它仍然无法正常工作

https://jsfiddle.net/nicolas1000/rke9xadq/

Answer 1

如果要使用，需要像这样注册组件:

组件:{ apexcharts:Vue ApexCharts }

完整的例子在这里:

import VueApexCharts from 'vue-apexcharts'

export default {
    components: {
      apexcharts: VueApexCharts,
    },
    data: function() {
      return {
        chartOptions: {
          chart: {
            id: 'vuechart-example'
          },
          xaxis: {
            categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
          }
        },
        series: [{
          name: 'series-1',
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }]
      }
    },
};