我有一个 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 和模板应答器:
导入不起作用(错误):
SyntaxError:导入声明只能出现在模块的顶层
[Vue 警告]:未知的自定义元素:- 您是否正确注册了组件?对于递归组件,请确保提供“名称”选项。
我不能将模板放在另一个模板中。
我该怎么办?
我在哪里可以放置此代码?
<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 或其他东西才能导入工作?