1. 首先和传统的开发一样，需要引入js文件和css文件，但是因为是用vue来开发，所以传统的通过标签的方式来引入的方法不适用了，arcgis官网给我们提供了一个工具"esriLoader"，这是他的npm地址esri-loader。（命令：npm install --save esri-loader）

2. 在项目中新建一个arcgis的配置文件，名称叫mapConfig.js（这个名字可以自定义）

/*
arcgis初始化配置
*/ 
window._base_path = "http://localhost:8860";
window._base_kuangjia = "http://localhost:8860";
window._arcgis_js_apiUrl = "http://localhost:8860/arcgis_js_api/library/4.12/";
window._base_landServer = "";
 
export function arcgisConfig () {
  window.arcgis = {
    config: {
      proxyUrl: 'http://localhost:8860/arcgis_js_api/library/4.12/init.js',
      baseUrl: window._arcgis_js_apiUrl + 'init.js',
      dojoUrl: 'http://localhost:8860/arcgis_js_api/library/4.12/dojo',
      // offlineMapWkid: 26911,
      getBaseUrl: function () {
        return this.baseUrl
      },
      getDojoUrl: function () {
        return this.dojoUrl
      },
      getWkid: function () {
        // return this.offlineMapWkid
      }
    }
  }
}
根据自己的api实际部署地址做相应修改

3. 然后新建一个地图的组件mapTwo.vue，代码如下：

<template>
  <div>
    <div id="viewDiv"></div>
    <div id="newmap"></div>
  </div>
</template>
<style scoped>
  @import url('http://localhost:8860/arcgis_js_api/library/4.12/esri/css/main.css');
  #viewDiv {
    margin: 20px auto;
    border: 1px solid #000;
    width: 500px;
    height: 400px;
  }
</style>
<script>
 
  // js 代码
  import  arcgisConfig  from '../config/mapConfig'
  import esriLoader from 'esri-loader';
  //
  export default {
 
    data () {
      return {
        name: '测试路由22',
        msg: '测试demo2'
      }
    },
    created: function () {
      
    },
    mounted: function () {
      const _this = this;
      this.$nextTick(function () {
           _this.test1();
      })
    },
    methods:{
      test1:function () {
        const options = {
           url: "http://localhost:8860/arcgis_js_api/library/4.12/init.js" //本地js资源
        };
        esriLoader.loadModules ([
          "esri/Map",
          'esri/views/MapView',
          "dojo/_base/array"
        ],options)
          .then (([
                    Map,
                    MapView,
                    array
                  ]) => {
            const map = new Map ({
              basemap: "streets"
            });
            const mapview = new MapView ({
              container: "viewDiv",
              map: map,
              zoom: 12,
              center: [ 102.7346125, 25.0563901 ]
            });
           //监听地图比例尺改变事件
            mapview.watch('zoom',function (e) {
              console.log(window._arcgis_js_apiUrl);
            });
 
          }, reason => {
            console.log (reason);
          });
      }
    }
  }
</script>
 
4. 然后在路由配置的index.js中添加刚刚新建的地图组件mapTwo.vue

此时在通过命令npm run dev运行项目，在浏览器中访问http://localhost:8091/#/mapTwo，将会打开地图

注意1：仅仅适用上面的代码在ie下运行会报不支持promise
解决办法有很多，这里我就说我自己的处理方法：

1. 需要另外引入https://cdn.polyfill.io/v2/polyfill.min.js，内容如下：
/* 处理ie不支持promise */
 
(function(undefined) {}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
然后在mapTwo.vue中引入

也可以使用第三方插件bluebird.js，处理（github地址：https://github.com/petkaantonov/bluebird）。

2. 可以借助babel将代码从es6编译成es5
具体实现步骤，请看我的另一篇文章：https://blog.csdn.net/D_bel/article/details/99290492

注意2：在使用esri-load在chrome浏览器下会正常运行，在ie11浏览器下可能会报一下很奇怪的错误