前言
最近正在学习基于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",