[add] vue3 arcgis core 4.19 demo.

wewindy · May 24, 2021 · 6a67726 · 6a67726
1 parent f903e3d
commit 6a67726
Show file tree

Hide file tree

Showing 11 changed files with 929 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -41,6 +41,12 @@ window['CESIUM_BASE_URL'] = `path/to/cesium/Source/`
 
 
 
+## ④ arcgis 注意
+
+详细的文档写在子目录中了。
+
+
+
 # 2 Future
 
 - 使用 svelte 试写一次

diff --git a/vue3-js-@arcgiscore/.gitignore b/vue3-js-@arcgiscore/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/vue3-js-@arcgiscore/README.md b/vue3-js-@arcgiscore/README.md
@@ -0,0 +1,44 @@
+# 简介
+
+使用 vite2 运行 `@arcgis/core` 项目。目前使用 vue3 框架。
+
+
+
+# 运行方式
+
+## 预备工作
+
+### ① 手动复制 `node_modules/@arcgis/core/assets` 文件夹
+
+将此文件夹完整地复制到 `public` 目录下即可
+
+### ② 先运行一次 `yarn build` 或 `npm run build`
+
+这样，rollup 的 copy 插件会复制 ① 中所提的 `assets` 文件夹到 `public` 目录，可以省去手动复制。
+
+
+
+
+
+## 启动开发
+
+``` sh
+yarn dev
+```
+
+
+
+## 生产编译
+
+``` sh
+yarn build
+```
+
+
+
+## 编译后预览（启动本地服务器）
+
+``` sh
+yarn serve
+```
+
diff --git a/vue3-js-@arcgiscore/index.html b/vue3-js-@arcgiscore/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/vue3-js-@arcgiscore/package.json b/vue3-js-@arcgiscore/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vue3-arcgisjsapi4",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@arcgis/core": "^4.19.3",
+    "vue": "^3.0.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.5",
+    "rollup-plugin-copy": "^3.4.0",
+    "vite": "^2.3.3"
+  }
+}
diff --git a/vue3-js-@arcgiscore/public/favicon.ico b/vue3-js-@arcgiscore/public/favicon.ico
diff --git a/vue3-js-@arcgiscore/src/App.vue b/vue3-js-@arcgiscore/src/App.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="viewDiv" :ref="mapToDivFn"></div>
+</template>
+
+<script>
+import { defineComponent, onMounted } from 'vue'
+import Map from "@arcgis/core/Map"
+import MapView from "@arcgis/core/views/MapView"
+import '@arcgis/core/assets/esri/themes/dark/main.css'
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    let divRef
+    let map
+    let view
+    const mapToDivFn = el => {
+      divRef = el
+    }
+
+    onMounted(() => {
+      map = new Map({
+        basemap: "topo-vector"
+      })
+
+      view = new MapView({
+        container: divRef,
+        map: map,
+        center: [112.5, 22.3],
+        zoom: 7
+      })
+    })
+    return {
+      mapToDivFn
+    }
+  }
+})
+
+</script>
+
+<style>
+#viewDiv {
+  width: 100vw;
+  height: 100vh;
+}
+</style>
diff --git a/vue3-js-@arcgiscore/src/main.css b/vue3-js-@arcgiscore/src/main.css
@@ -0,0 +1,9 @@
+html, body {
+  padding: 0px;
+  margin: 0px;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/vue3-js-@arcgiscore/src/main.js b/vue3-js-@arcgiscore/src/main.js
@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import esriConfig from "@arcgis/core/config.js"
+import './main.css'
+
+esriConfig.assetsPath = "./assets"
+createApp(App).mount('#app')
diff --git a/vue3-js-@arcgiscore/vite.config.js b/vue3-js-@arcgiscore/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import copy from 'rollup-plugin-copy'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    copy({
+      targets: [
+        { src: "node_modules/@arcgis/core/assets", dest: "public/assets" }
+      ],
+      hook: 'writeBundle'
+    })
+  ]
+})