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