示例

examples/ 属于框架仓库(贡献者/开发者视角)。普通应用开发请从快速开始ztron init 路径进入。

仓库 examples/ 目录下有八个可运行示例,均可用 pnpm filter 直接运行:

名称 包名 演示内容 运行命令
hello @zturnlibs/ztron-example-hello invoke/事件/Channel/fs/path 等 API 全面演练(85 检查) pnpm --filter @zturnlibs/ztron-example-hello dev
multiwin @zturnlibs/ztron-example-multiwin 多窗口:conf 声明 + 运行时 WebviewWindow 创建/销毁 pnpm --filter @zturnlibs/ztron-example-multiwin dev
menuprobe @zturnlibs/ztron-example-menuprobe 菜单能力探测 pnpm --filter @zturnlibs/ztron-example-menuprobe dev
bench @zturnlibs/ztron-example-bench 性能基准测量序列(invoke/Channel/窗口) node packages/cli/dist/index.js bench --runs 3
showcase @zturnlibs/ztron-example-showcase 新手交互式演示:34 张功能卡片 + 代码片段 + 文档直达 pnpm --filter @zturnlibs/ztron-example-showcase dev
react-demo @zturnlibs/ztron-example-react-demo React 19 + Tailwind v4 验证示例(React 写法调用 Ztron API) pnpm --filter @zturnlibs/ztron-example-react-demo dev
vue-demo @zturnlibs/ztron-example-vue-demo Vue 3 + Tailwind v4 验证示例(Vue 写法调用 Ztron API) pnpm --filter @zturnlibs/ztron-example-vue-demo dev
svelte-demo @zturnlibs/ztron-example-svelte-demo Svelte 5 + Tailwind v4 验证示例(Svelte 写法调用 Ztron API) pnpm --filter @zturnlibs/ztron-example-svelte-demo dev

hello

@zturnlibs/ztron-api 的 invoke、事件、Channel 流、fs/path/http/os 等 API 做全面演练,内置 85 项确定性检查;配合 ztron check 可作为整框架的回归基线(FULL_OK,exit 0)。其 ztron.conf.json 同时演示了声明式多窗口(windows[],含 url: "frontend" 占位与内联 html 两种窗口来源)。源码:examples/hello/(配置 ztron.conf.json、主进程 src/main.ts、命令 src/commands.ts、前端 frontend/src/main.ts)。

multiwin

演示多窗口两种方式:在 ztron.conf.jsonwindows[] 中静态声明,以及运行时通过 WebviewWindow 创建/销毁窗口(验证锚点 MULTI_WINDOW_OK,运行时创建的第二个窗口真实创建并销毁,SECOND_WINDOW_OK label=second)。源码:examples/multiwin/

菜单能力探测示例,覆盖菜单构建与动态操作等能力。源码:examples/menuprobe/

bench

性能基准示例:ztron bench 驱动其自动化测量序列(冷/热启动、invoke P50/P95、Channel 吞吐、事件往返、窗口创建、RSS、应用体积),并与 perf-budget.json 预算比对形成回归门禁(见仓库根 README 的 Bench 小节)。源码:examples/bench/

showcase

面向新手的交互式演示应用(34 张卡片,点按钮真跑 + 代码片段 + 文档直达)。 查看与使用方法见专页:Showcase 演示应用

react-demo

React 19 + Tailwind CSS v4 验证示例:标准 React 写法(createRoot、hooks、 React.lazy)直接跑在 Ztron 的 dev/构建管线上,覆盖 dev HMR、IIFE 打包与 IPC 全链路(invoke、事件、Channel、窗口主题)。接入方式与打包约束见专页: 前端框架与第三方包

vue-demo

Vue 3 + Tailwind CSS v4 验证示例:标准 Vue 写法(<script setup>、 composables、defineAsyncComponent)复刻 react-demo 的五个标签页,覆盖 dev HMR、IIFE 打包与 IPC 全链路;冒烟锚点 VUE_DEMO_OK。接入方式见专页: 前端框架与第三方包

svelte-demo

Svelte 5 + Tailwind CSS v4 验证示例:标准 Svelte 5 写法(runes、mount 入口、{#await import} 懒加载)复刻 react-demo 的五个标签页,覆盖 dev HMR、IIFE 打包与 IPC 全链路;冒烟锚点 SVELTE_DEMO_OK。接入方式见专页: 前端框架与第三方包

各示例均依赖 monorepo 内的 workspace 包,需先完成安装与原生链构建。

深入:架构 · IPC · 安全 ACL · CLI 命令参考

适用版本:ztron 0.3.0