已通过npm安装cal-heatmap，如何在Vue项目中正确导入使用？

你遇到的CalHeatMap() is not defined错误，核心原因是导入的变量名和实际构造函数名不匹配，再加上初始化时机的小问题，咱们一步步来修正：

1. 修正导入语句 #

cal-heatmap的ES模块默认导出的就是CalHeatMap构造函数，所以你需要把导入的变量名和构造函数名统一：

import CalHeatMap from 'cal-heatmap'

这样后续就能直接用new CalHeatMap()来创建实例了，之前的错误就是因为你导入成了calHeatmap，但调用时用了CalHeatMap，大小写和名称没对应上。

2. 调整初始化时机 #

beforeMount钩子执行时，组件的DOM还没挂载完成，而cal-heatmap需要挂载到一个已存在的DOM元素上，所以建议把初始化逻辑放到mounted钩子中。

3. 完整可运行的组件示例 #

<template>
  <!-- 必须提供一个DOM容器来挂载热力图 -->
  <div id="cal-heatmap-container"></div>
</template>

<script>
// 正确导入构造函数
import CalHeatMap from 'cal-heatmap'

export default {
  name: 'heatmap',
  props: {
    inspection: Object
  },
  data () {
    return {
      current: new Date().getFullYear(),
      heatmapInstance: null // 保存实例，方便后续销毁或更新
    }
  },
  mounted () {
    // 初始化热力图，指定挂载容器
    this.heatmapInstance = new CalHeatMap()
    this.heatmapInstance.init({
      itemSelector: '#cal-heatmap-container', // 对应template中的容器ID
      domain: 'year',
      subDomain: 'day',
      range: 1,
      // 这里可以添加你的其他配置项，比如数据源、颜色方案等
    })
  },
  beforeUnmount () {
    // 组件卸载前销毁实例，避免内存泄漏
    if (this.heatmapInstance) {
      this.heatmapInstance.destroy()
    }
  }
}
</script>

<style scoped>
/* 导入cal-heatmap的默认样式（可选，根据需求调整） */
@import 'cal-heatmap/cal-heatmap.css';

#cal-heatmap-container {
  width: 100%;
  min-height: 300px;
}
</style>

额外提示 #

如果需要全局使用cal-heatmap的样式，也可以在项目的main.js中导入：

import 'cal-heatmap/cal-heatmap.css'

内容的提问来源于stack exchange，提问作者renan brando