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:

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>
    </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...

相关推荐
赵英英俊5 分钟前
Python day31
开发语言·python
剪刀石头布啊13 分钟前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊15 分钟前
js常见的单例
前端·javascript
剪刀石头布啊21 分钟前
iframe通信、跨标签通信的常见方案
前端·javascript·html
阿星做前端36 分钟前
如何构建一个自己的 Node.js 模块解析器:node:module 钩子详解
前端·javascript·node.js
程序员-Queen1 小时前
RDQS_c和RDQS_t的作用及区别
c语言·开发语言
慕y2741 小时前
Java学习第九十三部分——RestTemplate
java·开发语言·学习
上单带刀不带妹1 小时前
JavaScript 中的宏任务与微任务
开发语言·前端·javascript·ecmascript·宏任务·微任务
旋风菠萝1 小时前
设计模式---单例
android·java·开发语言
啊呦.超能力1 小时前
QT开发---图形与图像(补充)
开发语言·qt