如何在 Vue 中使用 Twitch <script> 标签 [重复]

Question

我正在尝试实现与 Angular here 中相同的功能，但在 Vue.JS (2.6+) 中。

我正在尝试使用Twitch API for embedding a Stream，它仅通过此内联 HTML 显示使用情况：

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

和在 Angular 中一样，我们当然不能在 Vue 组件中使用 Script 标签。

所以我想知道在 Vue 中，在我的 Vue 应用程序中使用这个 Twitch Embed 的最佳方式是什么？ （我可以在 JS 中或在组件的 HTML）

Answer 1

您需要像导入任何其他库一样导入 twitch 库。如果您在npm 中没有找到它，您可以直接下载并导入到本地。看起来，它不是一个 ES6 模块，所以它会将库分配给全局窗口对象，从那时起你就可以使用它了。

这是一个例子：

main.js

import './libraries/twitch.v1.js';

// boilerplate your vue app

组件：

<template>
  <div ref="twitchVideo" />
</template>

<script>
export default {
  name: 'twitch-video',
  data () {
    return { player: null }
  },
  mounted () {
    const options = {
      width: 854,
      height: 480,
      channel: 'dallas',
    };
    // you might need to pass an ID string as a first argument..
    this.player = new Twitch.Player(this.$refs.twitchVideo, options);
    this.player.setVolume(0.5);
  }
};
</script>

---

另一种选择是将<script> 标签添加到您的index.html 文件中。但是，我建议您不要这样做，因为您不知道何时从组件中加载脚本，这违反了捆绑库的整个概念。