# 创建自定义组件
本文介绍如何注册、开发、调试、发布自定义组件。
#### 步骤一：注册自定义组件
1. 登录[智能数据洞察控制台](https://auth.huaweicloud.com/authui/login.html?#/login)。
2. 单击管理控制台左上角的![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001939154357.png)，选择区域，单击右上角的企业项目，选择企业项目。
3. 在控制台上方单击"项目"后，单击项目名称，进入项目页面。
4. 单击"作品管理 \> 自定义组件"，进入自定义组件界面。
5. 单击页面右上角的"注册组件"，弹出注册组件界面。
6. 配置参数后，确认无误单击"确定"。 
   表1注册组件参数说明 
   | 参数   | 说明                                                                                                                                                                                                                 |
   |:---|:---|
   | 组件名称 | 用户自定义的组件名称，注册后名称不支持修改。                                                                                                                                                                                             |
   | 图标   | 组件显示的图标，用户可自定义图标，如果不选择，则使用的是默认图标。                                                                                                                                                                                  |
   | 适用范围 | 注册组件的使用范围仅支持大屏和仪表板。                                                                                                                                                                                                |
   | 适用平台 | 使用平台仅支持PC。                                                                                                                                                                                                         |
   | 开发包  | 开发好的开发包上传。开发包的大小在40M以内，且格式为zip包。 说明： 注册自定义组件时可先不上传，待开发包开发并调试完成后再上传，参考[步骤四：上传开发包]。 |
   | 描述   | 用户对自定义组件的描述，最多可输入200个字符。                                                                                                                                                                                           |
      
   
   
 
#### 步骤二：下载开发者工具并制作开发包
1. 单击自定义组件界面右上角的"下载开发者工具"，下载开发包保存在本地。
2. 准备开发环境。 
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/public_sys-resources/note_3.0-zh-cn.png)
   开发自定义组件需要的环境准备：node.js建议20以上版本、npm建议10.5.0以上版本。
   
   
3. 解压开发者工具包，并配置开发包。
4. 进入insight-dev-tools文件夹，Ctrl+鼠标右键，打开PowerShell命令窗口，拉取开发依赖包。 
   ```
   npm install
   ```
   
   
5. 组件内部的link连接。 
   ```
   npm link
   ```
   
   
6. 组件初始化。 
   ```
   insight init
   ```
   图1初始化   
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001955419093.png "点击放大")
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/public_sys-resources/note_3.0-zh-cn.png)
   - "1"代表初始化命令。
   
   - "2"代表选择语言。
   
   - "3"代表组件名称，用户可自定义。
   
   - "4"代表组件别名，用户可自定义。
   
   - "5"代表组件版本号，用户可自定义。
   
   - "6"代表组件的描述，用户根据需求自定义。
    
   
   
7. 初始化后，insight-dev-tools文件夹中出现src目录，src目录中包含组件初始化开发包文件。 
   图2src目录   
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000002365355037.png)
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/public_sys-resources/note_3.0-zh-cn.png)
   - gui.json：组件的配置，包括样式、数据和交互。
   
   - index.js：组件入口文件。
   
   - index.less：样式配置文件。
   
   - package.json：依赖包文件。
    
   
   
8. 用户根据实际情况自定义组件开发包。详细开发包介绍请参见[自定义组件开发包说明](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0554.html)。
9. 进入src目录，构建组件，构建后src目录下出现dist文件夹（dist文件中的index.js指的是当前实现的组件包）。 
   1. 进入src目录。
      ```
      cd .\src\
      ```
      
   
   2. 构建组件。
      ```
      insight build
      ```
      
   
   
   
   
 
#### 步骤三：调试组件
1. 在本地完成开发包的制作后，请将本地组件接入控制台调试组件使用效果。
2. 在本地输入命令调试组件，获取调试端口。 
   ```
   insight start
   ```
   图3调试端口   
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000001928260206.png "点击放大")
   
   
3. 在自定义组件界面，单击操作列的"调试"，进入调试组件界面，进行参数配置（调试端口请根据[图片中]的端口填写）。
   
   表2自定义组件调试参数 
   | 参数     | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
   |:---|:---|
   | 组件名称   | 用户设置的自定义组件名称。                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
   | 调试对象   | 本地包：从本地获取的开发包。                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
   | 适用范围   | 目前支持大屏和仪表板。                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
   | 项目     | 选择用于调试的项目，可以使用该项目的数据进行调试。                                                                                                                                                                                                                                                                                                                                                                                                                                             |
   | 大屏/仪表板 | 选择具体用于调试的大屏/仪表板。                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
   | 调试端口   | 输入调试端口，进行校验，只允许输入数字。 - 指定不同的端口，可调试本地开发服务器上不同的开发包。  - 只有本地包调试需要输入，待发布包模式没有该项。  - 本地包模式下，没有填写调试端口，单击"调试"时，会提示需要填写调试端口。   |
      
   
   
4. 参数配置完成后单击"确定"，进入大屏/仪表板自定义组件界面调试。
5. 调试后再构建组件。 
   ```
   insight build
   ```
   
   
 
 #### 步骤四：上传开发包
1. 在控制台完成调试后，在本地打包自定义组件，dist文件夹中出现zip压缩包。 
   ```
   insight pack
   ```
   图4zip压缩包   
   ![](https://support.huaweicloud.com/usermanual-dataartsinsight/zh-cn_image_0000002365366641.png)
   
   
2. 进入自定义组件界面，选择未上传开发包的自定义组件，单击操作列的"编辑"，进入编辑页面，上传本地开发包。
3. 单击"确认"，开发包上传成功。
 
#### 步骤五：发布并使用自定义组件
1. 单击操作列的"发布"，发布自定义组件。
2. 自定义组件变为"已发布"状态后，根据组件的使用范围验证自定义组件。 
   - 大屏
     1. 单击左侧导航栏中的"数据分析 \> 大屏"，进入大屏列表页。
     
     2. 单击"新建大屏"，进入新建大屏页面。
     
     3. 选择"组件 \> 自定义组件"，在自定义组件列表中单击或拖动自定义组件到画布进行配置，具体配置请参见[新建大屏](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0503.html)。
      
   
   - 仪表板
     1. 单击左侧导航栏中的"数据分析 \> 仪表板"，进入仪表板列表页。
     
     2. 单击"新建仪表板"，进入新建仪表板页面。
     
     3. 单击"添加图标"，选择自定义组件进行配置，具体配置请参见[创建仪表板](https://support.huaweicloud.com/usermanual-dataartsinsight/dataartsinsight_03_0402.html)。