第一步：安裝依賴
首先，你需要 Node.js 和 weex-toolkit。
安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網 下載可執行程序直接安裝即可。
對於 Mac，可以使用 Homebrew 進行安裝：
brew install node
更多安裝方式可參考 Node.js 官方信息
安裝完成後，可以使用以下命令檢測是否安裝成功：
$ node -v
v6.3.1
$ npm -v
3.10.3
通常，安裝了 Node.js 環境，npm 包管理工具也隨之安裝了。因此，直接使用 npm 來安裝 weex-toolkit。
npm 是一個 JavaScript 包管理工具，它可以讓開發者輕鬆共享和重用代碼。Weex 很多依賴來自社區，同樣，Weex 也將很多工具發佈到社區方便開發者使用。
$ npm install -g weex-toolkit
國內開發者可以考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit
$ npm install -g cnpm
$ cnpm install -g weex-toolkit
提示：
如果提示權限錯誤（permission error），使用 sudo 關鍵字進行安裝
$ sudo cnpm install -g weex-toolkit
安裝結束後你可以直接使用 weex 命令驗證是否安裝成功，它會顯示 weex 命令行工具各參數：
第2步：創建文件
現在可以開始編寫代碼了。首先，我們創建一個 .we 文件（Weex 程序的文件後綴（擴展名）是 .we）。
打開空白的 hello.we 文件，輸入三個標籤，內容爲：
<template>
</template>
<style>
</style>
<script>
</script>
我們在 Get started 裏已經介紹過 Weex 基本的代碼結構：<template>、<style>、<script> 分別對應於
Web 中的 HTML，CSS（<style> 標籤），JavaScript（<script> 標籤）。
其實，上面的代碼就是最簡單的 Weex 程序。但是 .we 文件是不能直接運行的，這時候需要使用剛纔安裝好的 weex-toolkit。weex-toolkit 會編譯 .we 文件，並且創建靜態服務器。
這裏，使用 weex hello.we 命令編譯該程序。
$ weex hello.we
這時，命令行會做幾件事：
- 編譯
.we文件； - 啓動熱加載服務；
- 啓動靜態服務器；
- 拉起瀏覽器，訪問
http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr
這時候，已經可以在瀏覽器預覽 Weex 頁面了。不過此時頁面是空白的，因爲 .we 文件中沒有任何實質的內容。
第3步：添加內容
修改 weex.we 文件，向 <template> 標籤中添加內容。具體代碼如下：
<template>
<div>
<text>Hello world</text>
</div>
</template>
<style></style>
<script></script>
保存代碼後，瀏覽器會自動刷新頁面，這時會看到瀏覽器顯示了 “Hello world”。
第4步：添加樣式
現在，對已有的文本內容進行樣式修飾。這裏將文本顏色設置爲紅色，字體大小爲 50 像素。具體代碼如下：
<template>
<div>
<text class="text" style="color: #FF0000;">Hello world</text>
</div>
</template>
<style>
.text{
font-size: 50;
}
</style>
<script></script>
這時候，瀏覽器已經重新載入了頁面。其實，是weex-toolkit開啓了熱加載。可以看到紅色的 “Hello world”。
注意： Weex 支持通過 style 標籤來設定樣式，也支持內聯樣式風格。 對於數值，無需添加任何單位（包括 px、em、rem 等），這是建議的寫法。如需瞭解有哪些通用的樣式，可以參考 通用樣式。
第5步：預覽
已經在瀏覽器中看到了剛纔的代碼效果，爲了驗證三端是否一致，我們還需 Playground App 驗證。
這裏，我們需要爲 weex hello.we 增加 --qr 參數，表示生成二維碼。
$ weex hello.we --qr
然後，使用 Playground 掃碼即可。
第6步：調試
weex-toolkit 已經集成了 Debugger，只需要使用如下命令即可開啓 Debugger 開關調試 hello.we：
$ weex debug hello.we
我們輸入以上命令開啓，會自動打開瀏覽器，頁面上有兩個二維碼，第一個是 Debugger Server，第二個是 .we 文件的地址。我們在 Playground 中先掃第一個，此時瀏覽器會進入一個新的頁面，請你選擇你需要的調試模式：
- Debugger：將會打開 js debugger 頁面，您可以通過 debugger 頁面調試 js（諸如打斷點 查看js log 和查看調用堆棧等信息）；
- Inspector：將會打開 inspector 頁面，您可以通過這個頁面查看 Weex 頁面的 element 屬性結構，包含高亮元素，展示樣式表，以及顯示 native 的 log。同時可以打開一個遠程的手機鏡像，便於查看界面。另外調試方塊中的 ElementMode 可以用來選擇 element 樹顯示原始的 native 組件樹還是顯示面向前端同學的 DSL （HTML）組件樹。
選擇一種模式後會新開窗口進入調試頁面，這時我們再掃第二個二維碼即可進入我們想要調試的頁面進行調試了。