Weex開發環境搭建到Debug實戰

最近公司須要，須要實現先後端隔離項目的研發。在搭建前端框架項目時，發現Weex能夠實現一端開發，多端運行的特性，因此搭建研究下，算是作個技術預研。 （注：如下工具及使用的命令，均爲MAC環境安裝） 1、安裝基本的開發環境支持工具

1. 安裝Node（對於 Mac，能夠使用 Homebrew 進行安裝，很是簡單）

brew install node

1. 安裝完成後，使用以下命令檢測是否安裝成功

node -v
4.0.5

1. 安裝weex-toolkit（注意這裏使用了淘寶的 cnpm 鏡像，爲方便國內下載快，緣由都懂的）

npm install -g cnpm --registry=https://registry.npm.taobao.org  
cnpm install -g weex-toolkit

1. 安裝結束後能夠直接使用 weex 命令驗證是否安裝成功，下面直接開始建立項目框架

weex init your-project

1. 完成後進入your-project目錄，分別輸入以下命令，安裝依賴和啓動服務

npm install --安裝依賴
npm run dev  --watch
npm run serve

1. 下面能夠開始看本身的初始第一個頁面了，默認目錄下有一個src/foo.vue，輸入以下命令，進入調試界面

weex debug your_weex.vue

會自動調用瀏覽器打開_http://192.168.1.10:8088/_這個網址，顯示以下截圖

1. 使用手機安裝playground（地址_http://weex.apache.org/cn/playground.html_），在手機上打開playground，掃描上圖的紅色箭頭指引的二維碼。便可在手機端實時展示foo頁面的內容，進行調試了