本文介紹使用DataV開發工具完成組件開發的方法。
環境準備
- 進入Node.js官網，下載並安裝Node.js，推薦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。
- 安裝成功後，在命令列操作介面執行
node -v和npm -v命令（Mac在terminal中執行，Windows在cmd中執行），查看Node和npm版本。
安裝開發工具套件
- 執行以下命令安裝套件（Mac在terminal中執行，Windows在cmd中執行）。
npm install datav-cli -g - 安裝成功後，執行
datav --version命令，查看開發工具版本。
設定語言環境
DataV開發工具預設的語言環境是English，如果您需要使用其他語言環境，可以在命令列介面執行datav locale命令切換語言環境。
執行成功後，返回以下結果。
? What is your language? (Use arrow keys)
> English
Chinese
Japanese按下鍵盤上的↑和↓鍵，並使用Enter鍵確認後，即可切換語言環境。
切換後，如果您想根據賬戶所在的阿里雲地區，自動輸入命令切換語言環境，可以在登入後執行datav locale-clear | datav lc命令，清空預設設定的語言環境。清空後，您也可以再次設定語言環境。
使用者登入
通過datav login命令登入DataV開發人員控制台（Mac在terminal中執行，Windows在cmd中執行），執行後，需要輸入以下資訊。
| 登入資訊 | 說明 |
使用者名稱 | 輸入您在DataV控制台首頁右上方的名字，如果是子帳號，請注意使用主帳號的名字。 |
開發人員識別碼 | 輸入您在DataV控制台我的組件頁面複製得到的開發人員識別碼。 |
需要設定別名嗎? | 輸入Y或n。 |
別名 | 輸入您想要設定的別名。 |
當命令列中顯示設定成功時，說明您已經登入成功。
產生組件包
通過datav init命令產生組件包（Mac在terminal中執行，Windows在cmd中執行），執行後，需要輸入以下組件資訊。
| 組件資訊 | 說明 |
? 你要建立的組件名（字母，-，數字）是： | 組件名，只能由字母、數字和虛線（-）組成。 |
? 你要建立的組件顯示名稱是： | 顯示名稱是在可視化應用的組件列表中顯示的組件名。 |
? 你的組件描述是： | 輸入對組件的描述。 |
? 請從組件模板中選擇你要建立的組件（Use arrow keys）
| 組件使用的模板，包括基本文字和基本文字（國際版）。 按下鍵盤上的↑和↓鍵，並使用Enter鍵確認後，即可選擇組件模板。 |
當命令列顯示組件建立完畢時，說明您的組件包已經成功產生。
預覽組件
您可以通過以下命令預覽組件（Mac在terminal中執行，Windows在cmd中執行）。
cd 您的組件名
datav run當命令列顯示服務啟動時，說明預覽組件的服務已經啟動，Chrome瀏覽器會被自動開啟，並導航到組件預覽頁。
- 如果瀏覽器沒有自動開啟，可能是您未安裝Chrome瀏覽器。建議安裝Chrome，完成後用Chrome瀏覽器手動開啟localhost:1111/。
- 如果您看到連接埠佔用衝突，可能是您的1111連接埠被別的應用程式佔用了，可以使用
datav run -p 1112命令來指定使用1112連接埠開啟預覽服務。 - 如果瀏覽器開啟localhost:1111/，顯示並沒有此服務，可能是您的電腦並未配置hosts localhost指向127.0.0.1，可以在Chrome瀏覽器中訪問127.0.0.1:1111/來預覽組件。
組件預覽成功後的效果如下圖所示。
預覽頁主要分為中心畫布區，底部工具列和右側工具列三部分，詳細介紹如下：
- 中心畫布區
- 中心畫布區是用來展現組件，即時觀測組件變化的地區。
- 所有右側工具列的配置、資料修改都會即時展示在中心畫布的組件上。
- 組件的白框代表了組件的容器範圍大小，每個方向上的白框都可以縮放來測試組件在任意方向縮放的表現。
- 底部工具列
可以切換組件的語言環境。
- 右側工具列
右側工具列分為配置、資料、互動和發布4個面板。
面板 說明 配置 配置頁面描述了組件可變動的一些配置項，如果在配置操作，改動會立即生效。例如在此頁面拖拽字型大小滑動條，組件中的文字字型大小立即隨之變化。單擊右上的儲存，可以儲存當前修改的配置，並將當前配置作為此組件的預設配置。 
資料 資料頁面描述了組件的資料介面配置，資料頁的資料一旦改動，組件都會進行相應的改動。單擊右上的儲存，可以儲存當前修改的資料，並將當前資料作為此組件的預設資料。 
互動 互動頁面描述了組件的互動說明。 
發布 發佈頁面描述了組件的類型、表徵圖和發布版本等配置，單擊右上方的發布，即可發布組件。 
發布組件
您可通過以下三種方式發布組件：
- 方式一（推薦）
進入組件的目錄位址下，執行datav publish命令，組件將自動打包壓縮發布至帳號所在域的伺服器。
- 方式二
進入組件的目錄位址下，執行datav package命令，在組件目錄外會有一個以
組件-版本號碼命名的tar.gz壓縮包，將此壓縮包上傳到datav.aliyun.com的組件頁，即可發布。 - 方法三
進入預覽組件頁面下的發佈頁面，單擊發布，即可發布組件。