更新时间：2026-07-13 GMT+08:00
创建前端页面
本文将指导您在UI引擎中创建前端页面的完整操作流程，帮助您快速完成页面的基础配置与初始化。
约束与限制
- 用户可创建的前端页面数量受限于“基础版 数据建模引擎 用户”规格，具体支持数量根据用户数所处的阶梯而有所不同，详细信息请参考产品规格。
- 使用“页面模板”新建页面时，如果上传的共享模板中包含以下组件，可能会出现适配异常。请根据对应提示完成配置：
- 数据源表单、数据源表格：页面弹出类似“数据绑定失效”的提示。请在当前账号环境中重新配置可用数据源。
- 模板表单、模板表格、搜索模板：页面弹出类似“关联应用已删除”的提示。请重新绑定当前环境中可用的xDM-F数据模型以完成适配。
新增页面
- 进入前端项目页面设计器。
如果项目下暂无页面，进入“页面设计器”时，会弹出相关提示框，单击“确定”，关闭窗口。
- 在左侧插件栏中，单击
，展开“页面”插件面板。 图1 页面插件面板
- 在“页面”插件面板中，单击
，展开“页面设置”页面。 - 在展开的“页面设置”页面中，设置如下信息，单击“保存”。 图2 页面设置
表1 页面设置参数信息 类型
参数名称
参数说明
基本设置
页面名称
自定义页面的名称，默认值为“Untitled”。
长度限制为3-25个字符。
父文件夹
为当前页面指定所属父级文件夹，便于页面资产的分类管理与权限继承。
如果下拉列表无可用文件夹，请先参见创建文件夹完成创建。
页面访问路由
配置页面的对外访问地址，默认前缀：website.com。
仅允许包含英文字母、数字、下划线（_）、中横线（-）、正斜杠（/），且以英文字母开头。
注意：路由地址需全局唯一，重复配置将导致访问冲突。
页面模板
支持通过“选择模板”或“上传模板”快速初始化页面配置，提升创建效率，同时实现页面配置的标准化复用与跨场景资产共享。
- 选择模板：支持租户内资源共享，可直接选用当前租户下已有的全部页面模板，实现配置共享与标准化。操作时，单击“选择模板”，在展开页面中选择目标模板并单击“保存”，系统会自动将模板内容自动填充至当前创建页面。
- 上传模板：适用于跨租户、跨环境引用场景，支持复用其他租户或环境的页面模板，实现跨组织资产迁移与生态共享。如果本地无可用页面模板，请先前往“UI生态中心”下载。下载后，单击“上传模板”即可。具体操作请参见管理UI生态中心。
输入输出
输入配置
定义父组件或路由传递给当前页面的参数（类似Vue组件的“props”），需要按照JSON Schema格式编写。
示例：
{ "userId": { "type": "string", "required": true } }配置后，页面内可通过“this.props.userId”访问传入参数。
输出配置
定义当前页面向外触发的事件（类似Vue组件的“$emit”），需要按照JSON Schema格式编写。
示例：
{ "onSubmit": { "description": "表单提交事件" } }配置后，父组件可监听该事件实现联动交互。
设为根元素为Body
控制页面根节点的DOM类型。
- 勾选：根元素为<Body>，适用于独立页面或全屏应用。
- 不勾选：根元素为<div>，适用于嵌入式页面或组件化复用场景。
页面生命周期配置
添加页面生命周期
基于Vue 3组合式API，支持为页面配置生命周期钩子与响应式逻辑，实现数据初始化、状态监听等高级交互。
支持能力：
- 生命周期函数：onMounted、onUpdated、onBeforeUnmount 等。
- 组合式API：watch、computed、watchEffect等。
使用限制：
- 不支持直接使用“Function()”构造函数或“ref/reactive”等响应式API。
- 逻辑需以命名函数形式编写，并通过“this”调用已定义的方法。
操作步骤：
- 将鼠标悬停至“添加页面生命周期”上方，从下拉列表中单击需要配置的生命周期函数（如“onMounted”）。
- 在打开的“添加页面生命周期”代码编辑页面中，编写具体的实现逻辑，单击“保存”。
示例：在页面挂载时初始化数据
function onMounted() { this.initData(); // 调用已定义的页面方法 this.$api.getUserInfo(); // 调用系统 API }
父主题： 使用UI引擎的页面设计器开发前端项目
