## 介绍 自定义组件里使用element自带的组件和云后台已经提前引入的库是没有问题提的，但是很多时候我们还需要在自定义组件的同时，加载一些第三方的js库，比如高德地图。云后台引入了VueScript2来解决这个问题。 注意： 1.引入的插件必须是cdn形式的而非npm形式的。 2.利用loadedScript这样一个变量加上v-if来避免你js库没加载好的时候页面渲染导致找不到组件。 ``` <template> <el-amap v-if="loadedScript" class="amap-box" :vid="'amap-' + item.name"> </el-amap> </template> ``` ``` data() { let self = this; return { loadedScript: false } }, created: async function() { // 加载js插件 await this.loadScript(); // 高德地图 this.amapManager = new VueAMap.AMapManager(); VueAMap.initAMapApiLoader({ key: '申请一个key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.Geocoder', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'], // 默认高德 sdk 版本为 1.4.4 v: '1.4.4' }); VueAMap.lazyAMapApiLoaderInstance.load().then(() => { this.loadedScript = true; this.geocoder = new AMap.Geocoder({ // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode city: '全国' }); }); // 其他业务逻辑 }, methods: { loadScript () { let that = this; return new Promise((resolve, reject) => { that.VueScript2.load('https://cdn.jsdelivr.net/npm/vue-amap/dist/index.js').then(function () { resolve(); }); }); } } ```