ArcGIS API for JavaScript+vue系列（一）-使用npm安装@arcgis/core

一、ArcGIS API for JavaScript简介

ArcGIS API for JavaScript是WebGIS开发中非常重要的前端JS库，是浏览器端调用ArcGIS功能所使用的库。如Arcmap Pro中所使用的创建要素，编辑要素等地图功能，在浏览器端要实现这些共嗯那个即需要调用ArcGIS API for JavaScript。

ArcGIS API for JavaScript目前最新版本为4.20，在2020年Esri开发者峰会上，官方宣布要对JS API进行改造，以便于现代前端框架、开发工具集成。当前增强的功能有：
（1）原生Promise是默认使用的，移除了对Dojo Promise的支持。has属性中的esri-native-promise属性已经不再支持；
（2）本地化已改善，主要使用intl.setLocale()方法；
（3）现在已经使用原生的模块化来代替dojo/_base/declare，消除了Dojo模块化机制；
（4）多继承不再支持。

ArcGIS API for JavaScript就是ArcGIS软件对外提供的一些通过JS编写的接口，按照官网参考文档要求去调用这些接口的话就会得到预期的返回值。

二、vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue当前的大版本为vue3，vue2.0将模板、样式、逻辑三要素整合在同一个文件中，以.vue文件后缀形成单文件组件格式，方便项目架构和开发引用。符合国内大多数前端开发的使用习惯，所以得到了国内大部分公司的青睐。vue3相比与vue2有着更强的性能，更科学的打包和更友好的支持兼容TS。

其中，vue3相对于vue2的写法中改变最大的应该是从Options API到Composition API的改变。导致代码的书写格式发生了变化。在逻辑组织和逻辑复用方面，Composition API是优于Options API。同时在Composition API中几乎都是函数，会有更好的类型推断。当然Options API也是十分优秀的，如果不想改变，可以继续使用，本系列偏向于使用vue3结合ArcGIS API For JavaScript进行开发。当然因为Composition API中去除了this，将会对原本的书写习惯产生一定的挑战，将需要新的替代方案，尤其是在地图的使用中this有着很重要的作用。

三、安装@arcgis/core

在安装node.js后，可以使用npm安装vue cli，利用vue cli可以创建一个vue项目。利用以下命令可以全局安装vue cli。

npm install @vue/cli -g

如果是比较旧版本的cli，可以使用以下命令来升级。

npm update@vue/cli -g

最后使用vue的命令创建项目：

vue create 项目的名称

在ArcGIS API for JavaScript模块的导入中，也经历了很多的变迁，从“dojo”到“esri-loader”等逐渐的变化。而在4.18版本后，新增了一种全新的模式-@arcgis/core模式，可以实现直接在组件顶部引入所需的API模块，然后在组件代码中使用。@arcgis/core的安装方式如下：

npm install @arcgis/core

在package.json中可以查看@arcgis/core的版本。

需要特别注意的是：4.18以上的版本，如4.20版本的@arcgis/core不能将地图创建的数据保存到data中，在vue2中不能预定义一个变量来保存将要定义的地图数据。如果要使用其他组件中的地图信息，请使用组件通信的方式访问其他组件中的地图信息。后面会做详细的描述。

要使用@arcgis/core时，在组件中导入需要使用的模块，如：

import Map from '@arcgis/core/Map'
const map = new Map({})

在新建Map时传入基本的参数后即可正常的使用该模块。