Javascript 如何使用Twitch<；脚本>；Vue中的标记

我正在尝试实现与Angular中相同的功能，但在Vue.JS（2.6+）

我正在尝试使用，它仅通过以下内联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>

变量选项={
宽度：，
身高：，
频道：“，
视频：“，
收藏：“，
};
var player=new Twitch.player（“，选项）；
播放器设置音量（0.5）；

和Angular中一样，我们当然不能在Vue组件中使用脚本标记

---

因此，我想知道在Vue中，利用嵌入在Vue应用程序中的Twitch的最佳方式是什么？（我很乐意将它放在JS或组件的HTML中）

您需要像导入任何其他库一样导入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>

导出默认值{
名称：“twitch视频”，
数据（）{
返回{player:null}
},
挂载（）{
常量选项={
宽度：854，
身高：480，
频道：《达拉斯》，
};
//您可能需要传递一个ID字符串作为第一个参数。。
this.player=new Twitch.player（this.$refs.twitchVideo，选项）；
这个.player.setVolume（0.5）；
}
};

---

---

另一种选择是将

标记添加到index.html文件中。但是，我建议您不要这样做，因为您不知道脚本何时从组件中加载，这违背了绑定库的整个概念。

您需要像导入其他库一样导入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>

导出默认值{
名称：“twitch视频”，
数据（）{
返回{player:null}
},
挂载（）{
常量选项={
宽度：854，
身高：480，
频道：《达拉斯》，
};
//您可能需要传递一个ID字符串作为第一个参数。。
this.player=new Twitch.player（this.$refs.twitchVideo，选项）；
这个.player.setVolume（0.5）；
}
};

---

---

另一种选择是将

标记添加到index.html文件中。但是，我建议您不要这样做，因为您不知道脚本是何时从组件中加载的，这违背了绑定库的整个概念。

我今天尝试了这一点，复制JS文件的内容并将其带到组件中。但它最终无法正常工作，因此我不得不将其粘贴到index.html中。有什么我需要调查的吗？你是否将JS文件复制到你的本地机器上，并像建议的那样导入它（使用

import

）？进口后发生了什么？Twitch对象是否已定义（

console.log（Twitch）

）？两者都是。当iframe加载时，它使用我的localhost作为源代码——创建了一个源代码循环——这很奇怪。没有加载正确的路径或其他内容。但是，当它包含在html文档的头部时，效果很好：/我今天尝试了这一点，复制JS文件的内容并将其带到组件中。但它最终无法正常工作，因此我不得不将其粘贴到index.html中。有什么我需要调查的吗？你是否将JS文件复制到你的本地机器上，并像建议的那样导入它（使用

import

）？进口后发生了什么？Twitch对象是否已定义（

console.log（Twitch）

）？两者都是。当iframe加载时，它使用我的localhost作为源代码——创建了一个源代码循环——这很奇怪。没有加载正确的路径或其他内容。但是，当它包含在html文档的头部时，效果很好：/