如何将脚本导入到.vue文件中？

Question

我正在尝试将播放器导入到我的vue.js文件中。通常，我会在模板之外使用脚本文件，但这不起作用。

在html文件中，我将执行以下操作：

 <div id="player">
    <div id="vplayer"></div>
 </div>

 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>

  <script>
  var urlsrc = "http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8";
  var player = new Clappr.Player({source: urlsrc, parentId: "#vplayer", height: 240, width: 320});
  </script>

在vue.js中，我尝试用下面的返回代码做同样的事情，但它不起作用：

     <template>
      <div id="player">
         <div id="vplayer"></div>
       </div>
     </template>

<script>

export default {

  name: 'player',
  data () {
    return {
      script: 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js',
      url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
      player: new Clappr.Player({source: this.url, parentId: "#vplayer", height: 240, width: 320})
    }
  }
}
</script>

我得到一个错误，告诉我播放器是未定义的。如何让普通脚本在vue.js中运行？

Answer 1

您应该使用Mixins。制作自己的混音，然后在混音的methods部分中添加来自导入脚本的方法。

  var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

Answer 2

一种可能的解决方案是在created()挂钩中添加外部脚本并使用脚本onload方法

    <template>
      .... your HTML
    </template>

    <script>
    export default {
        data: () => ({
            url: 'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
            player: null
        }),
        created() {
            let clapprScript = document.createElement('script')
            clapprScript.setAttribute('src', 'https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js')
            clapprScript.onload = this.initPlayer;
            document.head.appendChild(clapprScript)
        },
        methods: {
            initPlayer() {
                this.player = new Clappr.Player({
                    source: this.url,
                    parentId: "#vplayer",
                    height: 240,
                    width: 320
                })
                console.log('Player is loaded')
            }
        }
    }
    </script>

Answer 3

在安装了带有npm的Clappr之后，您应该能够这样做：

<script>
  import Clappr from 'clappr';
  export default {
      created() {
          let player = Clappr.Player({...});
      }
  }
</script>

这样，您就可以在Vue组件中初始化clappr实例，就像在vanilla html、js场景中一样。