Vue单文件中加载arcgis显示地图

<template>
  <div id="content"></div>
</template>

<script>
import {loadModules} from 'esri-loader';
import esriConfig from "@arcgis/core/config";
export default {
  
  methods: {

      //创建地图
      _createMapView: function() {
            var _self = this;   //定义一个_self防止后续操作中this丢失
           var option = {      //定义一个包含有JS API中js开发包和css样式文件的对象
                url: 'https://js.arcgis.com/4.24/',
                css: 'https://js.arcgis.com/4.24/esri/themes/light/main.css',
            };

             loadModules(['esri/Map',
            'esri/views/MapView'], option)
                .then(([Map, MapView]) => {
                    esriConfig.apiKey = "AAPK446e5881d29248d39795a47b359bb81dDvA3xEEUCvMH0qKmoUjUVcqJJ5Yxl27H39r3b7ye41irXy5PnnfbA-XBimuo94Nr";
                    //业务代码在此处编写
                    var map = new Map({    //实例化地图
                        basemap: "topo-vector"
                    });

                    var view = new MapView({   //实例化地图视图
                        container: "content",
                        map: map,
                        zoom: 11, 
                        center: [104.072044,30.663776] 
                    });

                    view.ui.components = [];   //清除掉地图左上角默认的缩放图标
                    console.log('加载了地图')
                }).catch((err) => {
                    _self.$message('地图创建失败，' + err);
                });},
                
                
                },
                mounted:function(){
          this._createMapView()
                }}

</script>
<style scoped>
#content {
 width:200px;
 height:200px;
}
</style>

一定先 npm install esri-loader

npm install @arcgis/core