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

我有一个vue.js 2.0应用程序，我需要发布第一个apex图表示例：

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

这是我的路由器：

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

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

这是我的主页组件：

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

const Home={
数据：函数（）{
返回{
计数：0
};
},
模板：
`我需要很多信息才能把图表放在那里`
};

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

导入不起作用（错误）：

---

SyntaxError:导入声明只能出现在模块的顶层

---

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

我无法将模板放在另一个模板中

我怎么办

我可以把这个代码放在哪里

<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>'
};

const Home={
数据：函数（）{
返回{
选项：{
图表：{
id:“vuechart示例”
},
xaxis：{
类别：[1991、1992、1993、1994、1995、1996、1997、1998]
}
},
系列：[{
名称：'series-1'，
数据：[30,40,45,50,49,60,70,91]
}]
}
},
模板：
''
};

我仍然收到以下错误：

**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>

---

**语法错误：导入声明只能出现在模块的顶层**
[Vue warn]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“name”选项。
发现于
---> 

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

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

从“vue-apexcharts”导入VueAppExCharts
Vue.component（'apexchart'，VueAppExCharts）

---

导入工作需要使用Babel或其他工具吗？

您需要在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>'
};

从“vue-apexcharts”导入VueAppExCharts
Vue.component（'apexchart'，VueAppExCharts）
康斯特之家={
数据：函数（）{
返回{
选项：{
图表：{
id:“vuechart示例”
},
xaxis：{
类别：[1991、1992、1993、1994、1995、1996、1997、1998]
}
},
系列：[{
名称：'series-1'，
数据：[30,40,45,50,49,60,70,91]
}]
}
},
模板：
''
};

是的，您需要使用Babel和某种绑定器（如webpack）来传输导入语句

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

---

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

您的html是什么样子的？您应该能够在主组件中放置类似

的内容。谢谢，我的html是写在JS文件中的文本模板字符串…[Vue warn]：未知自定义元素：-您正确注册了组件吗？对于递归组件，请确保提供“名称”选项。谢谢，尝试在模板内部复制此插入，但iim收到2个错误：SyntaxError:导入声明可能只出现在模块的顶层[Vue warn]：未知自定义元素：-您正确注册了组件吗？对于递归组件，请确保提供“名称”选项。在您的问题中发布整个

HomeComponent

。将导入移动到您的home组件。如果他不使用捆绑程序，如何获得Vue警告？哦，这是一个很好的观点。

INDEX.HTML

位让我相信带有

import

语句的

标记没有通过webpack运行（可能不是），但是这个家伙似乎在没有webpack的情况下工作；他正在使用browser/CDN

标记导入组件。您正在尝试在没有网页的情况下使用模块加载。否，您需要完全删除

import

语句。如果使用