一个前端库只给出了基于用 script 标签引入自己的 js 文件的安装方法，我该如何在 .vue 文件中使用这样的库？

[Newyorkcity]

比如我现在遇到的 cal-heatmap： https://cal-heatmap.com/

我想用它做个热力图，就 Github 贡献图那种。在介绍如何安装的文档中没有 npm，我自己用 npm + calheatmap 搜索搜到了，也用 npm 装了，但是它使用的样例：

<div id="cal-heatmap"></div>
<script type="text/javascript">
	var cal = new CalHeatMap();
	cal.init({});
</script>

这肯定是没法直接用在 .vue 文件里的，

我试图这样在 .vue 文件中使用：

<script>
import * as ch from "cal-heatmap";
export default {
  name: "friend",
  created() {
    var cal = new ch.CalHeatMap();
    cal.init({});
  }
}
</script>

项目启动后在控制台得到这样的报错：

vue.esm.js?a026:628 [Vue warn]: Error in created hook: "TypeError: cal_heatmap__WEBPACK_IMPORTED_MODULE_0__.CalHeatMap is not a constructor"

found in

---> <Friend>
       <App> at src/App.vue
         <Root>

请问这样的库该如何利用？背后的逻辑是什么呢？谢谢

[Chikaku]

直接 import 'cal-heatmap';
然后 var cal = new CalHeatMap();

这样试试

[sugars]

在项目根目录的 app.html 里引入 script 文件就好了吧

[liyang5945]

import CalHeatMap from 'cal-heatmap';
import { CalHeatMap } from 'cal-heatmap';
试一下，目测第一个可行

[ysc3839]

https://github.com/wa0x6e/cal-heatmap/blob/0b594620104e0b11a94cc45feb0a76b58a038e0e/cal-heatmap.js#L3480-L3484
翻了下代码，最后是有作为模块导出的，所以可以直接 import 。