一. 下载并安装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
四. 安装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>
七. 启动项目
-
使用idea启动
右键点击项目目录中的package.json文件，选择"Show npm Scripts"
Show npm Scripts
双击serve启动项目
点击链接访问项目 - 使用cmd命令启动
打开cmd命令窗口，跳转至项目目录，输入以下指令启动项目
npm run serve
八. 项目创建成功
参考文章 ：
使用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
