Course 1: Best Practice of RK‘s start Maps SDK for javascript

this blog article is for recording my experience for using maps sdk for javascript in vue with vite tools. I had make it before. But I didn’t record it.So I forget. Now I need use it again. This time I will remember all the steps here for the next time using.

environment

1. vite： https://vite.dev/guide/
2. vue：
3. maps sdk for js: https://developers.arcgis.com/javascript/latest/get-started-npm/

1. first of all, download template and run it.

reference here : https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-vue
if you run npm create vite.Then I will laugh at you, because you re a DASHABI!! Why? If you read the official document you will find there are workable samples with “maps sdk with vue and vite”. Dont create tyres OK!
see here for more information: https://github.com/Esri/jsapi-resources/tree/main/core-samples/jsapi-vue

now you downloaded the samples and renamed:

dont worry, open in the vscode. Before, make sure you have installed NVM in your computer. And now use nvm install node and npm.In my example, I installed node of version :

I am not sure whether other versions could make error during runtime.

OK, then you open vscode and run :

npm install pnpm -g

yes, we use pnpm instead of npm. I like pnpm more.
then run the command:

pnpm install
pnpm run dev

now let’s have a look on directories and code:

I must admire: there is nothing but few codes.

2. What is in the templates

• package.json

"dependencies": {
    "@arcgis/core": "~4.32.0",
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.1.1"
  }

as we see, only @arcgis/core and vue here，it’s clean.

• index.html
  
  here are two important things we need remember:
  first is:

<div id="app"></div>

and another is :

<script type="module" src="/src/main.js"></script>

• main.js
  
  we can see the app div in the index.html have bind here.And bind App.vue on the index.html.
  And more detail we can reference here：
  
• At last, most important of all, how to load arcgis related module?

1. include dependency in package.json:“@arcgis/core”: “~4.32.0”
2. import arcgis css in main.css: @import “https://js.arcgis.com/4.32/@arcgis/core/assets/esri/themes/light/main.css”;
3. import main.css in App.vue’s style:

<template>
  <div class="mapdiv"></div>
</template>

<script>
......
</script>

<style scoped>
  @import './main.css';
</style>

Congraduations !!! You have known how to start maps sdk with vue and vite.You’re a 合格的giser了！

In the next course, I will introduce what are different between mapview, scenview… And differences between featureServer, mapServer…