创建一个PtahJs应用

在使用 PtahJs 创建应用时，可以通过一系列简单的步骤来实现。以下是一个详细的指南，帮助你创建并启动一个 PtahJs 应用。

前期准备

参考官网 创建一个vue项目

应用实例

通过 createPtah 函数创建一个新的应用实例：

import { createPtah } from '@ptahjs/creative-vue';

const ptahApp = createPtah({
    id: 've1',
    licenseKey: '******'
});

关联 Vue 实例

接下来，通过 $vueInstance 方法将 Vue 实例与 Ptah 应用关联起来：

// vue实例
const vueInstance = createApp(App);

ptahApp.$vueInstance(vueInstance);

选择应用模式

PtahJs 提供了多种运行模式，你可以通过 $mode 方法来设置

import ModeWeb from '@ptahjs/creative-vue-mode-web';
import ModeMobile from '@ptahjs/creative-vue-mode-mobile';
import ModeCanvas from '@ptahjs/creative-vue-mode-canvas';
import Mode3D from '@ptahjs/creative-vue-mode-3d';
import ModeFlow from '@ptahjs/creative-vue-mode-flow';

ptahApp.$mode(ModeWeb);

更多模式介绍：模式 API 文档

加载资源

PtahJs 支持多种资源加载方式，你可以使用 $load 方法来加载所需资源:

ptahApp.$load(RESOURCE_TYPE.SCENE_PROPS, []); // 加载场景属性
ptahApp.$load(RESOURCE_TYPE.SCENE_EVENTS, []); // 加载场景事件
ptahApp.$load(RESOURCE_TYPE.BLOCKS, []); // 加载原始模块
ptahApp.$load('Custom', [1, 2, 3]); // 自定义资源

详细资源类型参考：资源类型 API

启动

最后，通过 mount 方法启动应用：

ptahApp.mount();

多个应用实例

应用实例并不只限于一个。createPtah API 允许你在同一个页面中创建多个共存的 Ptah 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域

const ptahApp1 = createPtah({
    id: 'ptah1'
    /* ... */
}).mount();

const ptahApp2 = createPtah({
    id: 'ptah2'
    /* ... */
}).mount();

每个应用实例都拥有独立的作用域，不会相互影响。