环境准备

  1. 进入NodeJS官网,下载并安装NodeJS,推荐Node版本在 8.0.0 及以上,10.12.0以下。
    说明 如果您的系统已经安装过Node,并且还需要持续使用,推荐安装nvm来进行Node版本管理。使用nvm,您可以不用卸载之前的Node,安装现版本Node时不会造成冲突,安装地址:GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions
  2. 安装成功后,在命令行操作界面执行node -vnpm -v命令(Mac在terminal中执行,Windows在cmd中执行),查看Node和npm版本:
    
    node -v
    v10.11.0
    
    npm -v
    6.4.1

安装开发工具套件

  1. 执行以下命令安装套件(Mac在terminal中执行,Windows在cmd中执行):
    npm install --registry=https://registry.npm.taobao.org datav-cli -g
  2. 安装成功后,执行datav --version命令,查看开发工具版本:
    datav --version
    2.0.0

设置语言环境

如果您的默认语言环境不是English,您可以在命令行界面执行以下命令切换语言环境:
bash
datav locale
? 您的语言环境是? [English\Chinese\Japanese]

如果之后您想根据您账户所在域,自动切换语言环境,可以在登录后执行datav locale-clear | datav lc命令,清空默认设置的语言环境。

如果之后您想切换语言环境,也可以再次使用datav locale命令重新设置语言环境。

用户登录

通过以下命令登录DataV开发者控制台(Mac在terminal中执行,Windows在cmd中执行):

datav login

? 用户名: [输入您在 DataV 控制台首页右上角的名字,如果是子账号,请注意使用主账号的名字]
? 开发者识别码: [输入您在 DataV 控制台「我的组件」页复制得到的开发者识别码] 
? 需要设置别名吗? (Y/n) 
? 别名: [输入您想要设置的别名,如果需要的话]
设置成功
当命令行中显示 设置成功时,说明您已经登录成功。
说明 登录不是必须的,如果您只想使用创建组件和预览组件功能,是可以不进行登录操作的。只有发布功能需要登录。  

生成组件包

通过以下命令生成组件包(Mac在terminal中执行,Windows在cmd中执行):

datav init

? 你要创建的组件名(字母,-,数字)是... [组件名只能出现字母、数字和-]
? 你要创建的组件显示名是... [显示名是以后在大屏中组件列表里显示的您的组件名]
? 你的组件描述是... 
? 请从组件模板中选择你要创建的组件...
当命令行显示 组件创建完毕时,说明您的组件包已经成功生成,如下图所示:

预览组件

通过以下命令预览组件(Mac在terminal中执行,Windows在cmd中执行):

cd 您的组件名
datav run
当命令行显示 服务启动时,说明预览组件的服务已经启动了,您的Google Chrome浏览器会被自动打开,并导航到组件预览页,如下图所示:

说明
  • 如果您的浏览器没有自动打开,可能是您未安装 Google Chrome。建议安装Google Chrome,完成后用Chrome浏览器手动打开 localhost:1111/ 。 
  • 如果您看到端口冲突,可能是您的 1111 端口被别的应用程序占用了,您可以使用 datav run -p 1112命令来指定使用 1112 端口开启您的预览服务。
  • 如果您的浏览器打开 localhost:1111/,显示并没有此服务,可能是您的电脑并未配置 hosts localhost 指向 127.0.0.1,你可以在Chrom浏览器中访问 127.0.0.1:1111/ 来预览组件。
成功后的预览页如下图所示:

预览页主要分为中心画布区,底部工具栏和右侧工具栏三部分,详细介绍如下:
  • 中心画布区
    • 中心画布区是用来展现组件,实时观测组件变化的区域。
    • 所有右侧工具栏的配置、数据修改都会实时展示在中心画布的组件上。
    • 组件的白框代表了组件的容器范围大小,每个方向上的白框都可以缩放来测试组件在任意方向缩放的表现。
  • 右侧工具栏:右侧工具栏分为配置数据交互发布4个面板。
    • 配置:配置页面描述了组件可变动的一些配置项,如果在配置操作,改动会立即生效。比如在此页面拖拽字号滑动条,组件中的文字字号立即随之变化。单击右上的保存,可以保存当前修改的配置,并将当前配置作为此组件的默认配置。

    • 数据:数据页面描述了组件的数据接口配置,数据页的数据一旦进行改动,组件都会进行相应的改动。单击右上的保存,可以保存当前修改的数据,并将当前数据作为此组件的默认数据。

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

    • 发布:发布页面描述了组件的类型、图标和发布版本等配置,单击右上角的发布,即可发布组件。

发布组件

您可通过以下三种方式发布组件。
  • 方式一(推荐)

    进入组件的目录地址下,执行datav publish命令,组件将自动打包压缩发布至账号所在域的服务器。

  • 方式二

    进入组件的目录地址下,执行 datav package 命令,在组件目录外会有一个以组件-版本号命名的tar.gz压缩包,将此压缩包上传到 datav.aliyun.com 的组件页,即可发布。

  • 方法三

    进入预览组件页面下的发布页面,单击发布,即可发布组件。