@melt-js/demo-vue3-datav

comps-vue3-datav 的 消费方示例：Vue 3 + Vite 6 的 hel 宿主， 启动时通过 preFetchLib('comps-vue3-datav') 远程加载 2.5D 行政区地图组件， 演示基础地图、props / 事件、以及把它拼进一块数据大屏。本地端口 30070。

| 路由 | 内容 | | --- | --- | | #/ | 简介：远端地址、加载方式、组件与工具清单、入口代码 | | #/map | DvMap25D + DvRegionSelect：切换行政区、调 pitch / depth、开关标签 / 背景 / 悬停高亮、事件日志、下钻 | | #/dashboard | 数据大屏：KPI 卡片 + 地图 + 区域排行 + 选中区域，全国视图点击省份可下钻 |

启动顺序

# 终端 1：远程组件（固定 20093，strictPort）
pnpm comps-datav:dev

# 终端 2：本 demo（30070）
pnpm demo-datav:dev

打开 http://localhost:30070/ 。组件包没启动时，页面会渲染兜底页并显示当前远端地址与失败原因，不会白屏。

远端地址

src/configs/remote.ts 按环境推导，可用 VITE_REMOTE_HOST 覆盖：

| 环境 | 地址 | | --- | --- | | vite dev | http://localhost:20093（解析远端 index.html） | | vite build | https://unpkg.com/@melt-js/comps-vue3-datav/hel_dist/hel-meta.json | | pnpm demo-datav:build:local | VITE_REMOTE_HOST=http://localhost:20093，用于本地验收构建产物 |

远端地址以 hel-meta.json 结尾时直接取元数据，否则 skipFetchHelMeta: true 改为解析 index.html。

接入方式

本 demo 的 package.json 没有依赖 @melt-js/comps-vue3-datav：运行时实现完全由 preFetchLib 注入，npm 包只是可选的空壳代理 / 类型来源。所以这里手写了一份 RemoteDatav 类型（src/configs/remote.ts），组件按 Component 处理。

启动骨架（src/main.ts）：

import { createApp } from 'vue'
import { setupRemoteDatav } from './remote/setup'

const app = createApp(App)
await setupRemoteDatav(app) // bindVueRuntime → preFetchLib → installDatavComponents
app.use(router)
app.mount('#app')

• bindVueRuntime({ Vue }) 必须在远程脚本执行前调用：远程包把 vue external 成 window.Vue， 两边共用一份，否则点击 / 拖拽会失效（双 vue）；
• installDatavComponents(app) 全局注册 DvMap25D / DvRegionSelect，视图里直接写标签；
• 需要行政区数据 / geojson 工具时用 getRemoteDatav() 取（CN_PROVINCES / findRegion / loadGeojson ...）。

构建 / 发布

pnpm demo-datav:build          # 发布产物：远端指向 unpkg 上的 comps-vue3-datav
pnpm demo-datav:build:local    # 本地验收产物：远端指向 http://localhost:20093
pnpm demo-datav:preview        # 预览 dist（30070）

产物使用相对 base + hash 路由，发布后可直接从 https://unpkg.com/@melt-js/demo-vue3-datav/dist/index.html 打开（前提是组件包已发布）。

目录

demo-vue3-datav/
├─ src/
│  ├─ main.ts                  # 入口：预加载远程组件 → router → mount，含启动失败兜底页
│  ├─ App.vue                  # 外壳（导航栏 + router-view + 页脚）
│  ├─ configs/
│  │  ├─ app.ts                # demo 展示信息
│  │  └─ remote.ts             # 远端地址推导 + preFetchLib + RemoteDatav 类型
│  ├─ remote/
│  │  ├─ setup.ts              # bindVueRuntime → preFetchLib → installDatavComponents
│  │  └─ index.ts              # 业务侧访问器 getRemoteDatav()
│  ├─ router/index.ts          # hash 路由，示例清单在 meta 里
│  ├─ views/
│  │  ├─ OverviewView.vue      # 简介
│  │  ├─ MapView.vue           # 基础地图 + props / 事件
│  │  └─ DashboardView.vue     # 数据大屏拼装
│  ├─ components/DemoNavbar.vue
│  └─ styles/                  # 深色主题 + demo 外壳
├─ vite.config.ts              # 端口 30070，base './'
└─ README.md

注意

• geojson.cn 免费接口只开放国家级 / 省级数据，且有查询频率限制；正式项目建议把 geojson 落到自己的 CDN，通过 geojson 或 loader 传给 DvMap25D；
• 数据大屏里的 KPI / 排行为确定性假数据（同一个区域每次一样），接入时替换成自己的接口；
• 本 demo 只作为接入示例，不包含地图实现；组件实现见 comps-vue3-datav/README.md。

下载示例

示例区工具栏（全屏按钮左侧）的「下载示例」会按当前页面下载一份单文件「HTML + CDN」示例： Vue 与 hel-micro 走 CDN，组件由 preFetchLib 在运行时从 unpkg 拉取，双击即可打开，用于演示 / 推广 hel 的接法。

• 模板：src/configs/downloadExampleTemplate.ts
• 拼装：src/configs/downloadPage.ts（替换组件名 / 参数 / 背景，生成 hel-micro-<组件名>.html）
• 数据：src/configs/downloadExamples.ts（路由 → comps-vue3-datav 的组件与参数，新增示例页在这里补一条）
• 没有远程组件的页面（简介 / libs / 模板源码等）下载 FALLBACK_EXAMPLE