无法将图表添加到我的 vue 组件

Question

我有一个 vue.js 2.0 应用，我需要发布第一个顶点图表示例：https://apexcharts.com/docs/vue-charts/

目前，我的应用程序没有使用 IMPORT 语法并且运行良好。 我没有使用 Babel 或 WebPack。

这是我的路由器：

const routes = [
     { path: "/home", component: Home }
];
const router = new VueRouter({
  routes // short for `routes: routes`
});

const app = new Vue({
  router
}).$mount("#app");

这是我的 Home 组件：

const Home = {
  data: function() {
    return {
      count: 0
    };
  },
  template:
    `<div>Lots of informations</div> <span>I need to place the chart there</span>`
};

如果您查看 ApexChart 第一个示例，我必须使用 IMPORT 和模板应答器：

1. 导入不起作用（错误）：

   语法错误：导入声明只能出现在模块的顶层

   [Vue 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

2. 我不能将一个模板放在另一个模板中。

我该怎么办？

我可以在哪里放置此代码？

<template>
<div>
  <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</div>
</template>

我正在像这样在 index.html 中加载 Apexcharts：

<script src="https://cdn.jsdelivr.net/npm/apexcharts" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts" type="module"></script>

编辑 2：

这是我更新的组件：

const Home = {
  data: function() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }]
    }
  },
  template:
    '<div><apexchart width="500" type="bar" :options="options" :series="series"></apexchart></div>'
};

我仍然收到以下错误：

**SyntaxError: import declarations may only appear at top level of a module**

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

found in

---> <Anonymous>
       <Root>

我正在尝试像这样在 INDEX.HTML 中导入：

<script>
import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)
</script>

我是否必须使用 Babel 或其他东西才能导入工作？

Answer 1

您需要在 homecomponent 中导入图表组件。

import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)

const Home = {
  data: function() {
    return {
      options: {
        chart: {
          id: 'vuechart-example'
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 45, 50, 49, 60, 70, 91]
      }]
    }
  },
  template:
    '<div><apexchart width="500" type="bar" :options="options" :series="series"></apexchart></div>'
};

Answer 2

是的，您需要使用 Babel 和某种捆绑器（如 webpack）来转译导入语句。

浏览器中的 Vanilla JS 尚不支持模块。

那个，或者您正在使用的组件需要公开一个浏览器/CDN 版本，该版本将全局定义和引导该组件