# 为UI引擎前端项目添加自定义组件 在低代码开发实践中，标准基础物料往往难以覆盖所有复杂的业务场景。为此，UI引擎提供了自定义组件扩展能力，支持开发者构建并上传个性化组件，以满足特定的功能需求与界面定制要求。 同时，具有"管理员"角色的用户，可自主选择是否将组件公开发布至"UI生态中心"，实现内部私用或平台全域资源共享。 本文档将详细指导如何在UI引擎中完成自定义组件的添加与配置。 #### 约束与限制 - **开发能力要求**：自定义组件属于高级扩展功能，需具备前端开发知识（如JavaScript、组件化开发等相关技术能力）。 - **JSON文件规范** ：自定义组件配套的协议JSON文件必须符合UI引擎的规范，否则组件属性将无法正常解析和使用。具体规范要求请参见[UI引擎物料协议配置说明](https://support.huaweicloud.com/usermanual-idme/idme_ui_0075.html)。 #### 前提条件 - 已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。 - 已准备好自定义组件所需的全部文件，且单个文件大小不能超过10MB。包括： - JS文件：仅支持单个JS文件。如果包含多个组件，请通过构建工具将其构建成单个产物，并确保符合ESM（ECMAScript Modules）模块规范。 - JSON文件：需严格遵循UI引擎的物料协议规范，具体配置方法请参见[UI引擎物料协议配置说明](https://support.huaweicloud.com/usermanual-idme/idme_ui_0075.html)。 - CSS文件（可选）：用于组件样式定义，简单组件场景下可无需提供。 #### 添加自定义组件库 1. 在页面设计器的左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533905155.png)，展开"自定义组件（库）"插件面板。 图1自定义组件（库） ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533991579.png "点击放大") 2. 单击"添加组件库"，弹出"添加组件库"窗口。 3. 在弹出的窗口中，设置以下信息。 图2添加组件库 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002533985881.png) 表1添加组件库配置信息 | 参数名称 | 参数说明 | |:---|:---| | 组件库名称 | 自定义命名，需满足以下规则： - 仅允许小写字母、数字和中划线（-）组成。 - 不能以数字开头。 - 长度不能超过100个字符。 - 禁止使用关键字/保留字（npm、node、yarn、test、pnpm、js、ts、node_modules等）。 示例：my-components **请注意：组件库创建完成后，名称不可修改，请在创建前仔细确认。** | | 版本号 | 自定义版本标识，需满足以下规则： - 采用英文点号分隔的三段式数字，每段最多两位数字（如1.0.0、1.0.11）。 - 可在末尾添加-alpha、-beta，-gamma后缀（如1.0.0-alpha）。 | | JS附件 | 单击"JS附件上传"，上传本地准备好的符合ESM规范的JS文件。 | | JSON附件 | 单击"JSON附件上传"，上传本地准备好的符合物料协议规范的JSON文件。 | | CSS附件 | 单击"CSS附件上传"，上传本地已准备好的组件样式文件（可选）。 | | 组件库描述 | 自定义输入组件库的功能说明、适用场景等描述信息。 | | 保存为共享组件库 | 控制是否将组件库同步发布至"UI生态中心"，默认关闭。 此配置项仅对"管理员"角色用户可见。 - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002577936652.png "点击放大")：组件库将上传至"UI生态中心"，平台所有用户可见并支持下载。**开启前，请务必检查并确认组件库代码及附件中不包含密码、密钥、认证凭证等敏感信息。** - ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002577776946.png "点击放大")：组件库仅保存在当前项目，不对外共享。 **注意：组件库创建完成后，** **该共享状态** **不可修改，请在创建前仔细确认。** | 4. 配置完成后，单击"确定"。 #### 验证自定义组件 1. 添加完成后，自定义组件库会自动出现在自定义组件库列表中，且默认处于启用状态。 图3自定义组件库列表 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002534051099.png "点击放大") 2. 在左侧插件栏中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002502211228.png)，切换至"物料"面板。在"业务组件"分类下，即可查看并使用该自定义库组件中的所有组件。 图4查看自定义组件库 ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002502371066.png "点击放大")