javascript - vuejs注册组件问题

Question

我通过安装ApexChart

npm install vue-apexcharts

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

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

在我的app.js file我导入 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>

但我得到did you register the component correctly?

我使用带有 vue js 的 laravel

编辑我做了一个小提琴：它仍然无法正常工作

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

Answer 1

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

components: { apexcharts: VueApexCharts }

完整的例子在这里：

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]
        }]
      }
    },
};

Answer 2

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

Vue.component('apexchart', VueApexCharts)

在您的主文件（bootstrap.js）中，您需要以这种方式导入它，然后在您的每个文件中使用。