Невозможно добавить любой модуль без WebPack - PullRequest
Новая
       12

Невозможно добавить любой модуль без WebPack

0 голосов
/ 22 октября 2019

Я использую базовую маршрутизацию Vue 

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 и веб-пакета?

Все работает без нареканий. Я не использую webpack.

Теперь я добавляю библиотеку APEXCHARTS внутри 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>

Это один из моих компонентов, использующий литералы 

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? Я не могу использовать «ИМПОРТ», он не работает, есть ли способ упомянуть имя модуля внутри экземпляра vue new Vue?

Раньше ANGULARJS требовались имена модулей, но там, я не знаю, где добавить имя модуля, я не могу использовать синтаксис ИМПОРТА, пожалуйста, помогите.

Спасибо

РЕДАКТИРОВАТЬ: Я сделал FIDDLE: https://jsfiddle.net/nicolas1000/rke9xadq/

1 Ответ

0 голосов
/ 22 октября 2019

Попробуйте:

Если вам нужен тег <apexchart>, вы можете сделать следующее: 

Vue.component('apexchart', VueApexCharts)
...