@melt-js/demo-vue3-ele

Vue 3 + Vite 5 的 hel 宿主（消费方）示例，消费 comps-vue3-ele：由 demo-vue3-antd 拷贝而来，UI 框架换成 Element Plus，远程组件换成 comps-vue3-ele。

页面使用 vue-router（hash 模式） 把示例拆成三个可切换的页面，顶部导航栏同时显示当前示例的简介，示例区右上角有全屏按钮（只放大当前示例的组件预览区，基于 vue-fullscreen 的 pageOnly + teleport 模式）。

| 项 | 值 | | --- | --- | | npm 包名 | @melt-js/demo-vue3-ele | | unpkg 入口 | https://unpkg.com/@melt-js/demo-vue3-ele/dist/index.html | | 端口 | 30050 | | 消费的远程组件 | comps-vue3-ele（开发 http://localhost:20050 / 生产 unpkg） | | 路由 | [email protected]，hash 模式 | | 全屏 | [email protected]，pageOnly + teleport（不调用浏览器原生全屏） |

示例路由

| 路由 | 导航文案 | 内容 | | --- | --- | --- | | #/ | 简介 | demo 概览：依赖、端口、远端地址与示例入口 | | #/host | 主应用 | 宿主自己的计数按钮 + 本地组件 TestCommon | | #/remote | 远程组件 | preFetchLib 加载的 comps-vue3-ele App（内置 element-plus 的 ElButton） |

约定：

• hash 模式：demo 的构建产物会通过 unpkg 上的 dist/index.html 打开，history 模式在那种静态文件路径下会 404。
• 路由清单在 src/router/index.ts，每条路由的 meta.title / meta.description 同时驱动导航栏 tab 与下方那行简介；新增示例只要加一条路由。
• 全屏按钮只把当前示例标记为 data-demo-preview 的组件预览区送进全屏，页面标题、简介、说明与页脚都留在屏幕外；全屏借用 vue-fullscreen 5.x 的 pageOnly + teleport 模式：预览区临时挂到 body、用 fixed 铺满视口，退出时还原到页面原位置，不调用浏览器原生 Fullscreen API（iframe 内也可用）。预览区右下角提供「退出全屏」浮层按钮，Esc 也可退出；切换路由时会自动退出并还原。
• 需要全屏的示例在组件预览区外包一层 <DemoPreview>；简介页没有预览区，在路由 meta 里标记 fullscreen: false，工具栏不显示全屏按钮。
• #/remote 用 LevaPlayground 把 App + App.propsSchema.json 包进 libs-vue3-leva 的 PropsPlayground（左侧组件 + 右侧属性面板）。
• 外壳样式统一为浅色（Element Plus 蓝色强调色 #409eff），不再跟随系统的深色模式，避免与远程组件的浅色样式混搭。

文件结构

demo-vue3-ele/src
├── App.vue                   # demo 外壳：导航栏 + 示例舞台（含全屏按钮）+ router-view
├── components/
│   ├── DemoNavbar.vue        # 顶部导航栏：示例 tab + 当前示例简介
│   ├── DemoPreview.vue       # 组件预览区：全屏目标 + 「退出全屏」浮层按钮
│   ├── ScreenfullButton.vue  # 示例区全屏按钮
│   └── TestCommon.vue        # 宿主本地组件（主应用示例使用）
├── composables/
│   └── useDemoFullscreen.ts  # vue-fullscreen 的 pageOnly + teleport 封装（provide/inject）
├── configs/
│   ├── app.ts                # demo 展示信息（名称 / 端口 / unpkg 入口）
│   └── remote.ts             # 远程组件地址与 preFetchLib（Promise 复用）
├── router/index.ts           # 示例路由（hash 模式）
├── styles/demo-shell.css     # 外壳样式（导航栏 / 舞台 / 全屏 / 通用排版）
├── style.css                 # 变量与全局重置
└── views/                    # OverviewView / HostView / RemoteView

关键流程

1. src/main.ts：bindVueRuntime({ Vue }) 把宿主 vue 挂到 window.Vue，远程组件 external 的 vue 会复用这一份（少了这一份会出现双 vue，表现为远程组件点击后视图不更新）；随后在入口处调用 loadRemoteLib() 预加载远程组件，就绪后再挂载宿主。
2. src/configs/remote.ts：按 import.meta.env.PROD 选择远端地址——生产构建指向 unpkg 上的 hel-meta.json，本地开发指向 http://localhost:20050，可用 VITE_REMOTE_HOST 覆盖。loadRemoteLib() 内部调用 preFetchLib('comps-vue3-ele', { custom: { host } })：host 为 hel-meta.json 时直接取元数据，本地 dev server 没有该文件时解析 index.html。
3. src/router/index.ts + src/loadApp.ts：创建 hash 路由并在 createApp(App).use(router) 时挂载；#/host、#/remote 等示例按路由懒加载。
4. src/views/RemoteView.vue：defineAsyncComponent 复用入口处已预加载的同一个 Promise，渲染远程组件的 App。
5. src/composables/useDemoFullscreen.ts + src/components/DemoPreview.vue：App.vue 用 provideDemoFullscreen() 创建唯一一份 useFullscreen 控制器（pageOnly、teleport、fullscreenClass: 'is-demo-fullscreen'），ScreenfullButton 与 DemoPreview 通过 useDemoFullscreen() 共用它，全屏状态与「退出全屏」按钮始终同步；全屏目标由 App 解析为当前页面的 [data-demo-preview]。

vite build 的产物会自动从 unpkg 加载已发布的 comps-vue3-ele；vite dev 仍走本地 20050，无需手动改 host。

本地开发

# 终端 1：起远程组件（20050）
pnpm comps3-ele:dev

# 终端 2：起宿主（30050）
pnpm demo3-ele:dev

打开 http://localhost:30050 ，远程组件 示例会渲染 comps-vue3-ele 的 App 组件（内含 element-plus 的 ElButton，点击可自增）。

也可以让宿主指向已构建的远程产物（远程组件的构建产物默认指向 unpkg，本地预览要先用 build:local）：

pnpm comps3-ele:build:local && pnpm comps3-ele:preview   # 20050 上跑本地地址的 hel_dist
pnpm demo3-ele:dev

pnpm comps3-ele:build 生成的是发布用产物（资源地址指向 unpkg），未发布到 npm 前直接预览会去 unpkg 取资源；本地联调请用 pnpm comps3-ele:build:local。

构建 / 发布

pnpm demo3-ele:build                                       # 产出 dist/
pnpm --filter @melt-js/demo-vue3-ele run publish:stage    # build → npm stage 暂存，等待 2FA 审批

• vite.config.ts 的 base 为 ./，发布后 unpkg 上的 dist/index.html 可直接加载同目录资源；hash 路由同样可用。
• files 白名单只发布 dist/ 与 README。
• 生产构建自动使用 https://unpkg.com/@melt-js/comps-vue3-ele/hel_dist/hel-meta.json，本地开发自动使用 http://localhost:20050；也可用 VITE_REMOTE_HOST 覆盖。

与 demo-vue3-antd 的差异

| 项 | demo-vue3-antd | demo-vue3-ele | | --- | --- | --- | | 包名 | @melt-js/demo-vue3-antd | @melt-js/demo-vue3-ele | | 端口 | 30030 | 30050 | | 消费的远程组件 | comps-vue3-antd | comps-vue3-ele | | 远端开发地址 | http://localhost:20030 | http://localhost:20050 | | UI 框架 / 强调色 | ant-design-vue / #1677ff | element-plus / #409eff | | 根目录脚本前缀 | demo3:* / comps3:* | demo3-ele:* / comps3-ele:* |

下载示例

示例区工具栏（全屏按钮左侧）的「下载示例」会按当前页面下载一份单文件「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-ele 的组件与参数，新增示例页在这里补一条）
• 没有远程组件的页面（简介 / libs / 模板源码等）下载 FALLBACK_EXAMPLE