V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

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

  •  
  •   Newyorkcity · 2021-03-22 14:24:23 +08:00 · 955 次点击
    这是一个创建于 1375 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如我现在遇到的 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>
    

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

    4 条回复    2021-03-22 14:38:30 +08:00
    Chikaku
        1
    Chikaku  
       2021-03-22 14:28:12 +08:00
    直接 import 'cal-heatmap';
    然后 var cal = new CalHeatMap();

    这样试试
    sugars
        2
    sugars  
       2021-03-22 14:31:22 +08:00
    在项目根目录的 app.html 里引入 script 文件就好了吧
    liyang5945
        3
    liyang5945  
       2021-03-22 14:31:47 +08:00
    import CalHeatMap from 'cal-heatmap';
    import { CalHeatMap } from 'cal-heatmap';
    试一下,目测第一个可行
    ysc3839
        4
    ysc3839  
       2021-03-22 14:38:30 +08:00
    https://github.com/wa0x6e/cal-heatmap/blob/0b594620104e0b11a94cc45feb0a76b58a038e0e/cal-heatmap.js#L3480-L3484
    翻了下代码,最后是有作为模块导出的,所以可以直接 import 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5849 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 06:14 · PVG 14:14 · LAX 22:14 · JFK 01:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.