如何使用VUE创建你的第一个WEB地图

首先，我们需要配置好node环境

Node.js — Run JavaScript Everywhere (nodejs.org)

打开上面的官网，下载好node的安装包，具体安装过程其实和安装qq一样

安装完成之后记得配置一下环境变量（这里可以参考一下我之前的配置python环境变量的文章）

然后，打开vscode在你创建的文件夹下打开命令行

快速上手 | Vue.js (vuejs.org)

然后就可以照着这个链接创建vue3项目

再然后，

在命令行工具中通过 Ctrl + C 停止当前运行的项目，或者重新打开一个命令行面板，进入到当前项目根目录，然后通过以下命令在 Vue 项目中安装 ArcGIS Maps SDK for JavaScript：

npm install @arcgis/core 

通过上述命令安装完成 @arcgis/core 之后，我们可以在项目根目录下的 package.json 文件中看到安装的 @arcgis/core 版本，即 ArcGIS Maps SDK for JavaScript 版本，默认安装当前发布的最新版。

然后，

在您的 Vue 项目中，创建一个地图组件，用于显示地图。

在开始之前，我们首先找到 main.js 文件，然后在该文件中可看到引入的全局样式文件 main.js 文件，进入此文件后删除所有代码，在该文件顶部通过下述代码引入 ArcGIS Maps SDK for JavaScript 的 css 文件：

import '@arcgis/core/assets/esri/themes/light/main.css'; 

在 src/components 目录下创建一个名为 MapView.vue 的文件，然后编写以下代码：

<template>
  <div id="map"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import Map from '@arcgis/core/Map.js'
import MapView from '@arcgis/core/views/MapView.js'

const initMap = () => {
  const map = new Map({
    basemap: 'osm'
  })

  const view = new MapView({
    map,
    container: 'map',
    center: [-118.805, 34.027],
    zoom: 13
  })
}

onMounted(() => {
  initMap()
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style> 

在项目根目录找到 App.vue 组件，然后将下述代码拷贝至此组件中对应位置：

<template>
  <MapView />
</template>

<script setup lang="ts">
import MapView from './components/MapView.vue'
</script>

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

对于上述代码大家可以直接把上述代码替换掉原文件的代码。