本文介紹使用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的組件頁，即可發布。 - 方法三
進入預覽組件頁面下的發布頁面，單擊發布，即可發布組件。