VUE中如何保证script标签引入的JS已经加载完成?

Question

如图vue中通过script 标签引入外部JS,mounted 的时候执行外部js的方法时报错应该是script 引入的这个js 还未加载完成造成的,加载完成后,手动输入这个变量就不是未定义了所以,要修复这个BUG的话,必须保证外部js 加载完成,但是我不知道如何保证JS加载完成.....请问大神们这要怎么弄呢?

Answer 1

推荐在main.js中引入echarts并注册到vue的原型上！

1、npm install echarts --save

2、在main.js中：

import echarts from 'echarts';

Vue.prototype.$echarts = echarts;

3、现在可以在全局vue获取到注册到原型上的$echarts

一点建议，一般echarts在使用之前都需要进行初始化，所以在vue中初始化最好这么做：

mounted() {

    //将对象先获取到并存储起来，下面要用到的地方直接用存储起来的对象便可

    //后面的对象除了使用document获取id以外，还可以通过ref的方式，具体可以自己尝试

    //推荐使用ref来获取对象

    this.obj_echarts = this.$echarts.init(document.getElementById('xxx'));

},

data(){

    return {

        obj_echarts: null

    }

}

希望我的回答对你有所帮助！