在 Vue 中使用作为 CDN 导入的 ApexCharts

Question

我正在尝试在我的 Vue 项目中使用 vue-apexcharts，并且我正在尝试通过脚本标签导入库，以在我构建我的应用程序时减小包大小。

我的代码看起来像这样：

从“vue”导入 Vue；

export default new Vue({
  data: {},
  components: {},
  created() {
    const apexcharts = document.createElement("script");
    apexcharts.setAttribute("src", "https://cdn.jsdelivr.net/npm/apexcharts");
    document.head.appendChild(apexcharts);

    const vueApexcharts = document.createElement("script");
    vueApexcharts.setAttribute("src", "https://cdn.jsdelivr.net/npm/vue-apexcharts");
    document.head.appendChild(vueApexcharts);
   
  },
});

我不确定如何在添加脚本标签后注册 apexcharts 并在组件中使用它。通常我会在全局 window 中找到库引用，但在那里找不到任何东西。

提前致谢！

编辑

我正在努力实现这样的目标：

import Vue from "vue";

const loadScript = (src) =>
  new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.setAttribute("src", src);
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });

const loadApexCharts = () =>
  loadScript("https://cdn.jsdelivr.net/npm/apexcharts");
const loadVueApexCharts = () =>
  loadScript("https://cdn.jsdelivr.net/npm/vue-apexcharts");

const initVue = () => {
  Vue.component("apexcharts", window.VueApexCharts);
  new Vue({
    data: {},
    components: {},
    created() {
      console.log(window.VueApexCharts, 'log')
    },
  });
};

loadApexCharts()
  .then(loadVueApexCharts)
  .then(initVue)
  .catch((err) => console.warn(err));

但是我的日志returns在这种情况下未定义

Answer 1

ApexCharts 需要在 VueApexCharts 之前加载，所以你必须用 Promises 确保脚本加载顺序。 CDN 脚本分别定义了 window.ApexCharts 和 window.VueApexCharts，因此一旦加载脚本，您就可以注册 apexcharts 组件以在应用程序中使用：

// main.js
const loadScript = src => new Promise((resolve, reject) => {
  const script = document.createElement('script')
  script.setAttribute('src', src)
  script.onload = resolve
  script.onerror = reject
  document.head.appendChild(script)
})

const loadApexCharts = () => loadScript('https://cdn.jsdelivr.net/npm/apexcharts')
const loadVueApexCharts = () => loadScript('https://cdn.jsdelivr.net/npm/vue-apexcharts')

const initVue = () => {
  Vue.component('apexcharts', window.VueApexCharts)
  new Vue({
    render: (h) => h(App)
  }).$mount('#app')
}

loadApexCharts()
  .then(loadVueApexCharts)
  .then(initVue)
  .catch((err) => console.warn(err))

demo

在 Vue 中使用作为 CDN 导入的 ApexCharts

Using ApexCharts imported as CDN in Vue

vue.js

cdn

apexcharts

编辑