【问题标题】:Unable to add any module without WebPack没有 WebPack 无法添加任何模块
【发布时间】:2020-02-18 17:35:08
【问题描述】:

我正在使用基本的 Vue 路由

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

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

取自这个绿色示例: Can we make vue.js application without .vue extension component and webpack?

一切都完美无缺。我没有使用 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/

【问题讨论】:

  • 大多数软件包还不支持 ESM 模块。大多数服务器也没有针对 HTTP/2 进行优化。既然 Vue CLI 设置了你需要的一切,为什么你不想使用捆绑器?
  • 因为我的整个应用都已经这样构建了,所以将其转换为.vue文件会花费很多时间

标签: javascript vue.js webpack apexcharts


【解决方案1】:

试试这个:

如果您需要&lt;apexchart&gt; 标签,您可以执行以下操作:

Vue.component('apexchart', VueApexCharts)

【讨论】:

  • 非常感谢!我会试试这个,我会提前 1 小时去购物!
  • 顺便说一句,您可以利用 import 语句,因为它们肯定会让您的生活更轻松。并非所有库都有 UMD 构建或可通过脚本标签导入。你试过 parcelJS (parceljs.org) 吗?与 Webpack 相比,它很容易设置。它要快得多,它还会为您下载 npm 包。
  • 检查这个:jsfiddle.net/poc6kfda/3 请注意,我还修改了导入语句,所以我想我也必须修改我的答案哈哈哈
  • 我不知道如何解释我对你们的感激之情,谢谢你们1000次,如果可能的话,我会在你的贝宝上支付,给我留言
  • 不知道怎么做给你一些,兄弟如果可能的话,给我你的paypal,你为我节省了很多时间
猜你喜欢
  • 2017-04-10
  • 2016-01-26
  • 2021-07-21
  • 2012-01-02
  • 2020-06-09
  • 2016-03-25
  • 2016-11-04
  • 2021-05-21
  • 2017-09-21
相关资源
最近更新 更多