在 Vue 组件中导入和使用外部 Typescript 模块答案

【问题标题】：Import and use external Typescript module in Vue component在 Vue 组件中导入和使用外部 Typescript 模块
【发布时间】：2021-01-13 05:36:42
【问题描述】：

我对 Vue 很陌生，我正在尝试在我的 Vue 组件中使用外部 Typescript 模块来渲染吉他指板 (https://github.com/omnibrain/svguitar)。理想情况下，我希望能够在我的应用程序的不同位置呈现这些。我已按照ReadMe.md 中的步骤进行操作，但无法正常工作。这是我的组件的样子：

<template>
  <div class="home">
    <div class="chart" />
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { SVGuitarChord } from "svguitar";

const chart = new SVGuitarChord("#chart");

export default Vue.extend({
  mounted() {
    console.log("I'm mounted");
    chart
      .configure({
        strings: 6,
        frets: 5
      })
      .chord({
        fingers: [],
        barres: []
      })
      .draw();
  }
});
</script>

执行此操作后，我在控制台中收到以下错误：

TypeError: Cannot read property 'put' of null
    at Svg.addTo (svguitar.es5.js?98dc:2746)
    at new SvgJsRenderer (svguitar.es5.js?98dc:7478)
    at SVGuitarChord.get (svguitar.es5.js?98dc:7654)
    at SVGuitarChord.clear (svguitar.es5.js?98dc:8021)
    at SVGuitarChord.draw (svguitar.es5.js?98dc:7685)
    at VueComponent.mounted (Home.vue?42b8:20)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at Object.insert (vue.runtime.esm.js?2b0e:3139)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)

如果有人能帮我解决这个问题，那就太好了！如果需要任何其他信息，请告诉我。

【问题讨论】：

标签： javascript typescript vue.js node-modules

【解决方案1】：

发生这种情况是因为您将#chart 指定为SVGuitarChord 的容器，但您编写了<div class="chart" />。应该是<div id="chart" />

【讨论】：

天哪....不敢相信我错过了。谢谢hackape！
不客气。这里有一条建议，学会阅读错误堆栈。您可以在Svg.addTo (svguitar.es5.js?98dc:2746) 查看代码，看看那里到底出了什么问题。通常，您只需查看引发错误的代码就可以很好地猜测原因。