更新时间:2022-02-22 GMT+08:00

快速开发自定义组件

环境准备

进入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 link命令安装dlv-cli开发者工具。
  3. 工具安装后执行dlv命令显示如图2所示信息表示安装成功,其中当前开发工具信息如表1所示。
    图2 dlv命令
    表1 开发工具命令说明

    命令

    说明

    dlv init

    快速初始化组件模板。

    dlv start

    启动组件包预览组件。

    dlv package

    组件打包。

生成组件包

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

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

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

图3 dlv init
表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模块描述文件

组件开发

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

预览组件

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

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

  • 中心画布区

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

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

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

  • 右侧工具栏

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

表3 面板介绍

面板

说明

样式

演示页面描述了组件可变动的一些配置项,如果在配置操作,改动会立即生效。

数据

数据页面描述了组件的数据接口配置,数据页的数据一旦改动,组件都会进行相应的改动。

交互

交互页面描述了组件的交互说明。

发布组件

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