没有WebPack无法添加任何模块 [英] Unable to add any module without WebPack

问题描述

我正在使用基本的Vue路由

I'm using a basical Vue Routing

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

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

从这个绿色示例中选取: 我们是否可以在不使用vue.js的情况下制作vue.js应用程序.vue扩展组件和webpack?

Took from this green exemple : Can we make vue.js application without .vue extension component and webpack?

一切正常.我没有使用webpack.

Everything is working flawless . I 'm not using webpack.

现在，我要在index.html中添加APEXCHARTS库

Now, I'm adding the APEXCHARTS library inside of index.html

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

这是我的组件，使用文字

This is one my component , using literals

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实例化新Vue中提及模块名称吗?

My question is : how can I import this module, or any other module, without using WEBPACK, and using the vue 2 router ? I can't use 'IMPORT', it is not working, is there any way to mention the module name inside of the vue instantiation new Vue ?

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

Back in the days, ANGULARJS needed the modules names , but there, i dont know where to add the module name , I can not use the IMPORT syntax, please help.

谢谢

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

EDIT : I've done a FIDDLE : https://jsfiddle.net/nicolas1000/rke9xadq/

推荐答案

尝试一下:

在需要<apexchart>标记的位置，可以执行以下操作:

Where you need the <apexchart> tag, you can do the following:

Vue.component('apexchart', VueApexCharts)

这篇关于没有WebPack无法添加任何模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！