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

Question

我是 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)

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

Answer 1

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

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

Import and use external Typescript module in Vue component

javascript

node-modules

typescript

vue.js