一. 下载并安装NodeJS

网址：http://nodejs.cn/download/
安装完成后，打开cmd命令窗口，执行以下两个命令检查是否安装成功。若出现版本信息，则表示安装成功。

node -v
npm -v

二. 安装Vue Cli

打开cmd命令窗口，执行以下三个命令来分别设置镜像源、安装Vue环境和Vue的脚手架工具，如下：

npm config set registry https://registry.npm.taobao.org 
npm install vue

// 若不加“@3.0.4则为安装最新版本的vuec-li”
npm install -g @vue/cli@3.0.4

三. 创建Vue Cli项目

在合适的目录下新建文件夹，然后在此文件夹中打开cmd命令窗口。执行以下命令来创建一个基础的Vue项目demo，如下：
（项目名不能有大写字母！）

// vue create 项目名称
vue create vue-cli-arcgis

创建Vue Cli项目

四. 安装esri-loader中间件

执行以下命令进入项目所在的文件夹，并安装esri-loader中间件

<!-- cd ./项目名称 -->
cd ./vue-cli-arcgis
npm install esri-loader --save-dev

五. 安装element-UI

执行以下命令

npm i element-ui -S

六. 使用ide打开并配置项目

Idea、webStrom或者VSCode都可以进行开发，选择个人/公司常用的IDE即可。本文以Idea为例。
1. 引入 Element
在 main.js 中写入以下内容：

// 路径：src/main.js

// 引用Element ui
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

2. 修改App.vue

<!-- 路径：src/App.vue -->
<template>
  <div style="height: 100%">
    <router-view></router-view>
  </div>
</template>

<script></script>

<style></style>

3. 在index.html添加样式

<!-- 路径：public/index.html -->

<style>
  html,
  body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>

4. 修改router路由

按个人/公司习惯在src中新建文件夹管理vue、js等资源。（图中删除了src中的views、assets、components文件夹）

仅供参考
修改router.js文件

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "登录页",
      redirect: '/MainGis', // 示例中不含登录，直接重定向到主界面
      // component: resolve => require(["./modules/Login/components/Login"], resolve)
    },
    {
      path: "/MainGis",
      name: "主界面",
        component: resolve => require(["./modules/MainGIS/components/MainGis"], resolve)
    }
  ]
});

六. 加载ArcGIS API

访问ArcGIS官网下载arcgis api for javascript v3.xx版本
https://developers.arcgis.com/downloads/#javascript
打开下载的压缩包，将arcgis_js_v3xx_api\arcgis_js_api\library中的3.xx文件夹解压到项目的src文件夹里。（图中将3.39文件夹重命名为arcgis-api-3.39）

解压arcgis api到项目的src/plugins文件夹中
修改arcgis api中的init.js和dojo.js文件
搜索“[HOSTNAME_AND_PATH_TO_JSAPI]”，并将其替换为 “ [IP地址]:[端口号]/[arcgis api路径]/ ”
我的arcgis api存放在public/plugins/arcgis-api-3.39中，所以此处替换为“ 192.168.1.97:8080/plugins/arcgis-api-3.39/ ”

修改baseUrl
编辑主界面vue文件，此处为MainGis.vue

<template>
    <div id="mainGis">
        <div id="arcgisMap"></div>
    </div>
</template>

<script>
    import {loadModules} from "esri-loader";

    export default {
        name: "MainGis",
        methods: {
            //创建地图
            _createMapView: function () {
                const _self = this; //定义一个_self防止后续操作中this丢失
                const option = {
                    //定义一个包含有JS API中js开发包和css样式文件的对象
                    url: "/plugins/arcgis-api-3.39/init.js",
                    css: "/plugins/arcgis-api-3.39/esri/css/esri.css",
                };

                loadModules(
                    [
                        "esri/map"
                    ],
                    option
                ).then(
                    ([
                         Map
                     ]) => {
                        // 实例化map
                        let map = new Map("arcgisMap", {
                            logo: false,
                            basemap: "topo-vector",
                            center: [121.470, 31.231],
                            zoom: 13,
                            spatialReference: {
                                wkid: 4326
                            }
                        });
                    }
                ).catch((err) => {
                    _self.$message("地图创建失败，" + err);
                });
            }
        },
        mounted: function () {
            this._createMapView();
        },
    };
</script>

<style>
    #mainGis, #arcgisMap {
        width: 100%;
        height: 100%;
    }
</style>