从零开始的VUE+ArcGIS API for JS项目——初始化地图应用

本文链接：https://blog.csdn.net/hfhf45_/article/details/140817133

前言

最近正在学习基于arcig api的前端webgis开发，之前也做过一些基于vue的前端开发，但是一直没有系统性的学习过vue的内容。自学需要很大的毅力来坚持下去，所以想着通过写博客的方式来监督自己，同时把自己的学习成果记录下来。

使用的工具

IDEA 主要用于创建空的vue+vite项目，简化创建过程
VScode 前端编辑工具
Node.js 版本16.14.0
ArcGIS SDK版本4.30.0
VUE 版本3.4.31
VITE 版本5.3.4

从零开始

创建vue项目

使用idea新建vite项目，使用idea创建工程操作非常简单，在新建项目窗口中，选择Vite，然后在右侧信息中输入项目名称，文件位置，node版本，**模板（vue）**确定即可。
在这里插入图片描述

打开工程

使用vscode打开vue工程。

在这里插入图片描述

修改包管理器

将vscode的包管理器修改为pnpm，pnpm速度快比 npm 快了近 2 倍。在vscode中打开设置，搜索Npm: Package Manager，选择pnpm。如下图
在这里插入图片描述

添加依赖

运行pnpm install，然后开始添加依赖。在vscode NPM SCRIPTS目录下，右键package.json文件，运行Run install命令。当添加新的依赖后，都需要执行这个命令，将依赖注入到工程中。
在这里插入图片描述

启动项目

依赖添加完成后，就可以启动项目，在浏览器中查看项目，在NPM SCRIPTS中选择dev vite 运行，等待加载完成，在命令终端中，点击链接打开浏览器查看页面。
在这里插入代码片 在这里插入图片描述

初始化地图

添加arcgis api 依赖包

打开package.json 文件，在dependencies 中添加 “@arcgis/core”: “~4.30.0” ,其他依赖按需添加，然后执行 run pnpm install，注入依赖。
package.json 文件如下：

{
   
  "name": "webgis",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   
    "dev": "vite --mode development --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   
    "vue": "^3.4.31",
    "@arcgis/core": "~4.30.0",
    "@arcgis/map-components": "~4.30.0",
    "@esri/calcite-components": "^2.8.5",
    "element-plus":"2.7.8",
    "@element-plus/icons-vue":"2.3.1",