weex的環境搭建

Weex 是使用

Node.js

開發建構的，是以需要我們的電腦上安裝有 Node.js

第一步：安裝依賴

安裝 Node.js 方式多種多樣，最簡單的方式是在 Node.js 官網 下載下傳可執行程式直接安裝即可。官網下載下傳位址https://nodejs.org/en/

安裝完成後，可以使用以下指令檢測是否安裝成功：

$ node -v

v6.3.1

$ npm -v

3.10.3

2.安裝 weex-toolkit

通常，安裝了 Node.js 環境，npm 包管理工具也随之安裝了。是以，直接使用 npm 來安裝 weex-toolkit。

注意: weex-toolkit 在 1.0.1 之後才支援初始化 Vue 項目，使用前請确認版本是否正确。

$ npm install -g weex-toolkit

$ weex -v

v1.0.3

weex-builder : v0.2.4

weex-previewer : v1.3.4

國内開發者可以考慮使用淘寶的 npm 鏡像 —— cnpm 安裝 weex-toolkit

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

$ cnpm install -g weex-toolkit

提示：如果提示權限錯誤（permission error），使用 sudo 關鍵字進行安裝

$ sudo cnpm install -g weex-toolkit

安裝結束後你可以直接使用 weex 指令驗證是否安裝成功，它會顯示 weex 指令行工具各參數：

第二步：初始化項目

然後初始化 Weex 項目： weex init awesome-project

執行完指令後，在 awesome-project 目錄中就建立了一個使用 Weex 和 Vue 的模闆項目。

第三步：開發

這裡有一份中文weex文檔：http://www.shouce.ren/api/view/a/11585

開發完成後，在項目根目錄下執行 npm install  安裝項目依賴的js庫。

然後輸入：npm run build 同步在dist目錄下建立*.js檔案（index.we 轉換成->index.js）

第四步：部署

npm run serve 開啟一個端口8080的服務  

接着打開浏覽器在位址欄輸入：localhost:8080就可以出現效果了

還有一種方式打開這個.we檔案看到效果就是在

src檔案夾下面開啟cmd輸入：weex  Demo.we（就是你項目名）就會自動浏覽器渲染效果

還可以在手機上顯示這個效果：

進入src目錄下會看到一個.we檔案（如檔案是：text.we），這個就是你的Weex程式

然後按住Shift+滑鼠右鍵出現：在此處打開指令視窗：輸入weex xxxxxxx（檔案的全稱包括擴充名） --qr 如：（weex text.we --qr）

就會生成一個很大的二維碼：然後用WEEX應用掃描就可以看到效果了！這個應用在這裡下載下傳：http://alibaba.github.io/weex/download.html  

再在這個目錄下打開cmd 輸入：npm run dev 這個是開啟監聽.we檔案的改動

也就是說我們在src目錄下：用記事本（其他編譯軟體也可以）打開.we檔案把那個HelloWeex 改成Helloword接着重新整理網頁就會改變文本；手機上重新整理也會跟着改變！