快速开发自定义组件

自定义组件开发流程

1. 环境准备
2. 安装开发者工具
3. 生成组件包
4. 组件开发
5. 预览组件
6. 发布组件

环境准备

进入NodeJS官网，下载并安装适合自己操作系统的NodeJS版本。NodeJS支持Windows、MacOS或Linux操作系统。

安装开发者工具

1. 登录DLV管理控制台，进入“我的组件”页面，单击页面右上角的“下载开发者工具”按钮，下载包名如“dlv-cli-x.x.x”的开发者工具，其中包名中的x.x.x代表工具的版本号。
   图1 下载工具
   
2. 将开发者工具“dlv-cli-x.x.x”解压到本地。若在Windows操作系统中请打开命令提示符窗口，若在Linux或Mac操作系统中请打开命令行终端，执行cd命令进入dlv-cli-x.x.x目录，执行npm i命令安装相关依赖包，然后执行npm link命令安装dlv-cli开发者工具。
3. 安装成功后，可以执行dlv命令查看当前开发工具信息。
   图2 dlv命令
   

   表1 开发工具命令说明

   命令	说明
   dlv init	快速初始化组件模板。
   dlv start	启动组件包预览组件。
   dlv package	组件打包。

生成组件包

组件包是DLV服务提供的自定义组件模板，用户可以基于当前模板进行开发。

首先新建一个目录，例如newCom，进入该目录执行dlv init命令创建组件，如图3所示，请根据提示信息依次输入新建组件的相关信息。

请不要在开发者工具dlv-cli-x.x.x的目录下执行dlv init命令，否则会导致开发者工具无法正常使用。

图3 dlv init

当新建目录下生成了相应模板文件后，说明您的组件包已经成功生成。

├──node_modules # npm依赖包

├──gui.json # 组件配置

├──index.js # 组件入口

├──index.less # 组件样式

└──package.json # npm模块描述文件

组件开发

生成组件包后，用户可以基于生成的模板进行自定义组件开发，详细的开发指导请参见组件开发指南。

预览组件

首先进入组件目录中，通过dlv start命令预览组件。当命令行显示“服务启动”时，说明预览组件的服务已经启动，Chrome浏览器会被自动打开，并导航到组件预览页。

图4 预览组件

预览页主要分为中心画布区和右侧工具栏两部分，详细介绍如下：

• 中心画布区

  中心画布区用来展现组件，实时观测组件变化的区域；

  所有右侧工具栏的配置、数据修改都会实时展示在中心画布的组件上；

  组件的黑框代表了组件的容器范围大小，每个方向上的黑框都可以缩放来测试组件在任意方向缩放的表现。

• 右侧工具栏

  右侧工具栏分为样式、数据和交互3个面板。

发布组件

进入组件的目录下，执行dlv package命令，在组件目录外会有一个以“组件-版本号”命名的tar.gz压缩包，将此压缩包上传到DLV管理控制台中“我的组件”页面的某一个组件包中，即可发布。