使用实例 API

useRuntimeApp()

useRuntimeApp() 用于创建预览模式的 Runtime 实例。

import { useRuntimeApp } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });

说明

• 必须在 Vue 的 setup() 中调用。
• 组件卸载时会自动销毁实例。
• 页面数据需要通过 runtime.schema(data) 单独加载。

典型用法

<template>
    <Preview :app="runtime" />
</template>

<script setup>
import { Preview, useRuntimeApp } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });
runtime.schema(pageJson);
</script>

---

useDesignerApp()

useDesignerApp() 用于创建设计器模式实例。返回值仍然是 Runtime，但会附带 runtime.designer。

import { useDesignerApp } from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 'designer-1' });
const designer = runtime.designer;

说明

• 必须在 Vue 的 setup() 中调用。
• 会自动准备设计器相关能力，并在卸载时自动释放。
• 设计器操作统一从 runtime.designer 访问。

典型用法

<template>
    <DesignerRoot :app="runtime">
        <WorkspaceWidget />
    </DesignerRoot>
</template>

<script setup>
import { DesignerRoot, WorkspaceWidget, useDesignerApp } from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 'designer-1' });
runtime.schema(pageJson);

runtime.designer.addScene({
    label: '首页',
    props: { title: 'Page 1' },
});
</script>

---

对比

	useRuntimeApp()	useDesignerApp()
适用场景	预览 / 运行	设计器 / 编辑器
返回值	Runtime	Runtime，并带 .designer
拖拽能力	无	有
历史记录	无	有
自动销毁	有	有

延伸阅读

完整实例方法请查看应用实例和Designer 实例。