# 快速开发自定义组件
#### 自定义组件开发流程
1. [环境准备]
2. [安装开发者工具]
3. [生成组件包]
4. [组件开发]
5. [预览组件]
6. [发布组件]
 
 #### 环境准备
进入[NodeJS官网](https://nodejs.org/en/)，下载并安装适合自己操作系统的NodeJS版本。NodeJS支持Windows、MacOS或Linux操作系统。
 #### 安装开发者工具
1. 登录DLV管理控制台，进入"管理中心 \> 我的组件"页面，单击页面右上角的"下载开发者工具"按钮，下载包名如"dlv-cli-x.x.x"的开发者工具，其中包名中的x.x.x代表工具的版本号。
   图1下载工具   
   ![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0000001087233481.png "点击放大")
   
   
2. 将开发者工具"dlv-cli-x.x.x"解压到本地。若在Windows操作系统中请打开命令提示符窗口，若在Linux或Mac操作系统中请打开命令行终端，执行**cd** 命令进入dlv-cli-x.x.x目录，然后执行**npm link**命令安装dlv-cli开发者工具。
3. 工具安装后执行**dlv** 命令显示如[图2]所示信息表示安装成功，其中当前开发工具信息如[表1]所示。
   图2dlv命令   
   ![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0239165486.png "点击放大")
    表1开发工具命令说明 
   | 命令          | 说明         |
   |:---|:---|
   | dlv init    | 快速初始化组件模板。 |
   | dlv start   | 启动组件包预览组件。 |
   | dlv package | 组件打包。      |
      
   
 
 #### 生成组件包
组件包是DLV服务提供的自定义组件模板，用户可以基于当前模板进行开发。
首先新建一个目录，例如newCom，进入该目录执行**dlv init** 命令创建组件，如[图3]所示，请根据提示信息依次输入新建组件的相关信息。
![](https://support.huaweicloud.com/devg-dlv/public_sys-resources/note_3.0-zh-cn.png)
请不要在开发者工具dlv-cli-x.x.x的目录下执行**dlv init**命令，否则会导致开发者工具无法正常使用。
图3dlv init   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0241181081.png "点击放大")
表2组件信息 
| 组件信息                                       | 说明                                                            |
|:---|:---|
| Please select a language...                | 通过↑和↓选择语言环境。                                                  |
| Please set the component name...           | 组件名（包含字母、数字、下划线，且只能以字母和下划线开头，不超过32个字符。若无特殊说明，本文中的名称命名都遵循此规范）。 |
| Please set the component alias...          | 产品界面中显示的组件名（包含中文、字母、特殊字符，32个字符。）。                             |
| Please set the component version number... | 组件版本号，默认版本号为1.0.0。                                            |
| Please describe the component...           | 组件的描述信息。                                                      |
   
当新建目录下生成了相应模板文件后，说明您的组件包已经成功生成。
├──node_modules # npm依赖包
├──gui.json # 组件配置
├──index.js # 组件入口
├──index.less # 组件样式
└──package.json # npm模块描述文件
 #### 组件开发
生成组件包后，用户可以基于生成的模板进行自定义组件开发，详细的开发指导请参见[组件开发指南](https://support.huaweicloud.com/devg-dlv/dlv_04_0002.html)。
 #### 预览组件
首先进入组件目录中，通过**dlv start**命令预览组件。当命令行显示"服务启动"时，说明预览组件的服务已经启动，Chrome浏览器会被自动打开，并导航到组件预览页。
图4预览组件   
![](https://support.huaweicloud.com/devg-dlv/zh-cn_image_0241181082.png "点击放大")
预览页主要分为中心画布区和右侧工具栏两部分，详细介绍如下：
- 中心画布区 中心画布区用来展现组件，实时观测组件变化的区域；
  所有右侧工具栏的配置、数据修改都会实时展示在中心画布的组件上；
  组件的黑框代表了组件的容器范围大小，每个方向上的黑框都可以缩放来测试组件在任意方向缩放的表现。
  
- 右侧工具栏 右侧工具栏分为样式、数据和交互3个面板。
  
表3面板介绍 
| 面板 | 说明                                       |
|:---|:---|
| 样式 | 演示页面描述了组件可变动的一些配置项，如果在配置操作，改动会立即生效。      |
| 数据 | 数据页面描述了组件的数据接口配置，数据页的数据一旦改动，组件都会进行相应的改动。 |
| 交互 | 交互页面描述了组件的交互说明。                          |
   
 #### 发布组件
进入组件的目录下，执行**dlv package**命令，在组件目录外会有一个以"组件-版本号"命名的tar.gz压缩包，将此压缩包上传到DLV管理控制台中"我的组件"页面的某一个组件包中，即可发布。