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

我正在尝试将播放器导入我的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>

var urlsrc=”http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8";
var player=new Clappr.player（{来源：urlsrc，parentId:“#vplayer”，高度：240，宽度：320}）；

在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>

导出默认值{
姓名：'玩家'，
数据（）{
返回{
脚本：'https://cdn.jsdelivr.net/npm/clappr@最新/dist/clapr.min.js'，
网址：'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
player:new Clappr.player（{source:this.url，parentId:“#vplayer”，高度：240，宽度：320}）
}
}
}

我得到一个错误，说球员是未定义的。如何让普通脚本在vue.js内部运行？

您应该使用。制作自己的mixin，然后在mixin的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')
    }
  }
})

你应该使用。制作自己的mixin，然后在mixin的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')
    }
  }
})

---

一种可能的解决方案是在

created（）

hooks中添加外部脚本，并使用script

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>

.... 你的HTML
导出默认值{
数据：（）=>({
网址：'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
玩家：空
}),
创建（）{
让clapprScript=document.createElement（'script'）
clapprScript.setAttribute（'src'，'https://cdn.jsdelivr.net/npm/clappr@最新/dist/clappr.min.js'）
clapprScript.onload=this.initPlayer；
document.head.appendChild（clapscript）
},
方法：{
initPlayer（）{
this.player=新的Clappr.player({
来源：this.url，
parentId:#vplayer“，
身高：240，
宽度：320
})
console.log（'播放器已加载'）
}
}
}

一种可能的解决方案是在

created（）

钩子中添加外部脚本，并使用script

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>

.... 你的HTML
导出默认值{
数据：（）=>({
网址：'http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8',
玩家：空
}),
创建（）{
让clapprScript=document.createElement（'script'）
clapprScript.setAttribute（'src'，'https://cdn.jsdelivr.net/npm/clappr@最新/dist/clappr.min.js'）
clapprScript.onload=this.initPlayer；
document.head.appendChild（clapscript）
},
方法：{
initPlayer（）{
this.player=新的Clappr.player({
来源：this.url，
parentId:#vplayer“，
身高：240，
宽度：320
})
console.log（'播放器已加载'）
}
}
}

在使用npm安装Clappr后，您应该能够做到这一点：

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

从“Clappr”导入Clappr；
导出默认值{
创建（）{
让player=Clappr.player（{…}）；
}
}

---

通过这种方式，您可以在Vue组件中初始化clappr实例，就像在普通html、js场景中一样。

在使用npm安装clappr后，您应该能够做到这一点：

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

从“Clappr”导入Clappr；
导出默认值{
创建（）{
让player=Clappr.player（{…}）；
}
}

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