使用Vue-cli搭建ArcgisAPI项目

一. 下载并安装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/[email protected]

三. 创建Vue Cli项目

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

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

创建Vue Cli项目

四. 安装esri-loader中间件

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

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

3. 在index.html添加样式

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

1. 访问ArcGIS官网下载arcgis api for javascript v3.xx版本
   https://developers.arcgis.com/downloads/#javascript

2. 打开下载的压缩包，将arcgis_js_v3xx_api\arcgis_js_api\library中的3.xx文件夹解压到项目的src文件夹里。（图中将3.39文件夹重命名为arcgis-api-3.39）

   
   
   解压arcgis api到项目的src/plugins文件夹中

3. 修改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
4. 编辑主界面vue文件，此处为MainGis.vue

七. 启动项目

1. 使用idea启动
   右键点击项目目录中的package.json文件，选择"Show npm Scripts"

   
   
   Show npm Scripts
   
   
   双击serve启动项目
   
   
   点击链接访问项目
2. 使用cmd命令启动
   打开cmd命令窗口，跳转至项目目录，输入以下指令启动项目

npm run serve

八. 项目创建成功

使用Vue-cli搭建ArcgisAPI项目

参考文章 ：
使用Vue-cli搭建ArcgisAPI项目并引用element-UI
https://zhuanlan.zhihu.com/p/445765844
安装vue-cli3.0并创建vue项目
https://blog.csdn.net/weixin_41996632/article/details/102669324
Vue-cli3如何添加路由（router）
https://www.cnblogs.com/zoro-zero/p/14242081.html
在vue中报export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue 解决办法
https://blog.csdn.net/qq_45680037/article/details/115354444
运行npm install 时，卡在sill idealTree buildDeps没有反应
https://blog.csdn.net/weixin_46182244/article/details/121302702
element-快速上手【官网】
https://element.eleme.cn/#/zh-CN/component/quickstart
VueCli3 项目结构和具体作用
https://www.cnblogs.com/500m/p/12049228.html
arcgis vue 离线加载js/本地加载js
https://blog.csdn.net/a2469025185/article/details/109674917