0

我正在使用基本的 Vue 路由

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

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

取自这个绿色示例： 我们可以在没有 .vue 扩展组件和 webpack 的情况下制作 vue.js 应用程序吗？

一切工作完美无缺。我没有使用 webpack。

现在，我在 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>

这是我的组件之一，使用文字

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 warn]: Unknown custom element: <apexchart> - did you register the component correctly? For recursive components, make sure to provide the "name" option

我的问题是：如何在不使用 WEBPACK 和使用 vue 2 路由器的情况下导入这个模块或任何其他模块？我不能使用'IMPORT'，它不起作用，有没有办法在 vue 实例化 new Vue 中提及模块名称？

过去，ANGULARJS 需要模块名称，但是在那里，我不知道在哪里添加模块名称，我不能使用 IMPORT 语法，请帮忙。

谢谢

编辑：我做了一个 FIDDLE： https ://jsfiddle.net/nicolas1000/rke9xadq/

4

1 回答 1

0

试试这个：

在需要<apexchart>标签的地方，您可以执行以下操作：

Vue.component('apexchart', VueApexCharts)
于 2019-10-22T14:30:20.613 回答