为UI引擎前端项目添加自定义组件

约束与限制

• 开发能力要求：自定义组件属于高级扩展功能，需具备前端开发知识（如JavaScript、组件化开发等相关技术能力）。
• JSON文件规范：自定义组件配套的协议JSON文件必须符合UI引擎的规范，否则组件属性将无法正常解析和使用。具体规范要求请参见UI引擎物料协议配置说明。

前提条件

• 已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
• 已准备好自定义组件所需的全部文件，且单个文件大小不能超过10MB。包括：
  • JS文件：仅支持单个JS文件。如果包含多个组件，请通过构建工具将其构建成单个产物，并确保符合ESM（ECMAScript Modules）模块规范。
  • JSON文件：需严格遵循UI引擎的物料协议规范，具体配置方法请参见UI引擎物料协议配置说明。
  • CSS文件（可选）：用于组件样式定义，简单组件场景下可无需提供。

添加自定义组件库

1. 在页面设计器的左侧插件栏中，单击，展开“自定义组件（库）”插件面板。
   图1 自定义组件（库）
   

2. 单击“添加组件库”，弹出“添加组件库”窗口。
3. 在弹出的窗口中，设置以下信息。
   图2 添加组件库
   

   表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附件上传”，上传本地已准备好的组件样式文件（可选）。
   组件库描述	自定义输入组件库的功能说明、适用场景等描述信息。

4. 配置完成后，单击“确定”。

验证自定义组件

1. 添加完成后，自定义组件库会自动出现在自定义组件库列表中，且默认处于启用状态。
   图3 自定义组件库列表
   
2. 在左侧插件栏中，单击，切换至“物料”面板。在“业务组件”分类下，即可查看并使用该自定义库组件中的所有组件。
   图4 查看自定义组件库