如何在Vue中引入外链JS文件？
Vue支持通过在HTML文件中直接引入外链JS文件的方式来实现引入。我们只需要在html的head区块中通过script标签来引入外链JS文件即可
示例：
<head>
<script src=\"http://cdn.xxx.com/filename.js\"></script>
</head>
何时需要在Vue中引入外链JS文件？
在使用Vue进行开发的时候，可能需要使用一些不在Vue官方提供的功能，需要通过引入外链JS文件来实现。
如何通过外链视频来进行Vue开发？
首先需要在HTML文件中引入video标签，然后在Vue中进行调用。具体实现方法请参照以下示例：
示例：
<template>
<video src=\"http://xxx.com/abc.mp4\"></video>
</template>
<script>
export default {
mounted() {
this.$nextTick(()=>{
this.setupPlayer();
})
},
methods:{
setupPlayer() {
const videoNode = this.$el.getElementsByTagName('video')[0];
const player = plyr.setup(videoNode, {});
return player;
}
}
}
</script>
如何更好的管理引入外链JS的代码？
在引入外链JS的代码量过大的时候，我们需要考虑将其相关操作进行封装，以便提高项目的整体复用性。
示例：
将引入的外链JS文件进行统一管理，例如在一个js文件中定义常量和相关操作函数：
const API_URL = 'http://xxx.com';
const playerSetup = () => {
const videoNode = document.getElementById('video')
const url = `${API_URL}/video.mp4`
// 此处省略播放器相关操作
return player;
}
export default {
API_URL,
playerSetup,
};
然后在需要使用的Vue组件中通过import语句进行引入：
<script>
import util from 'xxxx/util';
export default {
mounted() {
util.playerSetup();
}
}
</script>
