最近在看ArcGis的文章，根据developers.arcgis.com/文档来做了简单的html后觉得是时候配合vue来一波了，然后发现找的资料里面很多都是可以运行的，但是自己搭建的就是不行，后来总算是弄成功了，特此记录。（前端菜鸡，第一次发文有点小紧张）
1.vue环境的搭建
我主要就是用vue-cli的方式搭建vue的环境的，这个网上很多，自己找吧找吧搭建个就是了。
2.引入ArcGis模块
你可以使用npm install --save esri-loader 做局部引入也可以使用 yarn add esri-loader
3.在项目中使用
在加载地图前需要加载arcgis对应的样式表：
地址：https://js.arcgis.com/3.23/esri/css/main.css
可以在css中直接引入：@import url('https://js.arcgis.com/3.23/esri/css/main.css');
然后在你需要的画地图的文件引入模块：
import { loadModules } from 'esri-loader'；
这是html：
<div ref="map" class="map"> <div ref="mapview"></div>
</div>这个是js中的代码
loadModules(['esri/map', 'esri/dijit/LocateButton']) .then(([Map, LocateButton]) => { // 使用给定的选项创建映射 const map = new Map(this.$refs.map, {//新建地图 center: [-56.049, 38.485], zoom: 3, basemap: 'streets'//底图属性 })
// 初始化地图 const button = new LocateButton({ map: map }, this.$refs.mapview) button.startup() }) .catch(err => { console.error(err) })
在mounted中调用上面的代码。
这个时候可能会发现控制台会报404错误，这个是最坑的地方，这也是我不用最新4.x版本的原因。
我们在main.js里面加入下面的代码：
import { loadScript } from 'esri-loader'const options = { url: 'https://js.arcgis.com/3.23/'}loadScript(options)
这个项目是我按照git里面的一个esri-vue-cli-example-master来做的，ArcGis的版本是3.23不是最新的4.x版本，3.x与4.x版本的文档还是有一些差异的（我开始就是搞混了，以为是兼容的出了很多问题），地图成功加载完后还有很多小问题需要自己一点点优化，这里只是做一个简单的记录。
这个只是一时练手之作，代码的话请移步github大神的源码来学习：
https://github.com/tomwayson/esri-vue-cli-example
