Weex快速上手
“工欲善其事，必先利其器”，學習Weex之前需要先搭建好本地的開發環境，如果只是想簡單的體驗下Weex的魅力，可以使用Weex提供的dotWe線上執行環境，地址為“dotwe.org/vue”。
安裝依賴
Weex官方提供weex-toolkit的腳手架工具來輔助開發和除錯。不過需要先安裝Node.js和Weex Cli相關的環境。
安裝Node.js
安裝Node.js有多種方式，最簡單的方式是直接從Node.js官網下載可執行安裝程式直接安裝即可。如果是Mac環境，還可以使用Homebrew進行安裝，安裝命令如下：
brew install node 複製程式碼
安裝完成之後，可以使用下面的命令來檢測是否安裝成功。
$ node -v v6.11.3 $ npm -v 3.10.10 複製程式碼
通常，安裝Node.js軟體包後，npm包管理工具也會隨之安裝。因此，接下來可以直接使用npm來安裝weex-toolkit工具。
npm install -g weex-toolkit 複製程式碼
如果要升級weex-toolkit，則可以使用下面的命令：
weex update weex-devtool@latest//@後標註版本後，latest表示最新版本 複製程式碼
如果是國內開發者，還可以使用淘寶的npm映象來安裝weex-toolkit，涉及到的安裝命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g weex-toolkit 複製程式碼
安裝結束後，可以直接使用weex命令來驗證是否安裝成功，如果安裝成功會顯示weex命令列工具各引數，如下圖所示。
安裝weexpack
weexpack是weex新一代的工程開發套件，是基於weex快速搭建應用原型的利器。使用weexpack可以快速的幫助開發者通過命令列建立weex工程和外掛工程，新增相應平臺的weex 應用模版，weexpack還支援快速打包weex 應用並安裝到手機執行，並建立weex外掛模版併發布外掛到weex應用市場。安裝weexpack的命令如下：
npm install -g weexpack 複製程式碼
安裝Weektools
weex-toolkit是官方提供的一個腳手架命令列工具，可以使用它進行Weex 專案的建立、除錯以及打包等操作。weex-toolkit從1.0.1版本之後才開始支援初始化Vue專案，所以使用時請注意weex-toolki的版本。weex-toolkit的安裝命令如下：
npm install -g weex-toolkit 複製程式碼
如果使用上面的命令安裝，使用的是從https://registry.npmjs.org獲取的安裝源，所以對於國內使用者來說，最好選擇從阿里的映象去下載，安裝時需要執行如下的一些命令。
npm install -g cnpm --registry=https://registry.npm.taobao.org//淘寶映象 npm install -g weex-toolkit 複製程式碼
安裝完成之後，可以使用weex -v或者weex命令來驗證是否安裝成功。
安裝Android環境
如果需要支援Android平臺則需要配置Android開發環境：安裝Java相關環境，安裝Android Studio及Android SDK。在安裝編譯Android專案時需要保證Android build-tool的版本為23.0.2以上。
安裝iOS環境
如果需要支援iOS平臺則需要配置iOS開發環境：安裝Xcode、cocoaPods及其相關環境。其中，Xcode是Apple 公司提供的整合開發工具，可以使用它開發macOS和iOS應用程式，而CocoaPods/">CocoaPods則是負責iOS專案管理的第三方開源庫的工具，合理的使用CocoaPods可以提高程式的開發效率。
建立專案
接下來，使用Weex提供的create命令初始化一個Weex專案。
weex create weexdemo 複製程式碼
執行完上述命令後，在工程weexdemo目錄下就會建立一個使用Weex或Vue模板建立的專案，工程目錄結構如下。
WeexProject ├── README.md//專案便籤 ├── android.config.json//Android工程配置 ├── configs//weex配置 ├── ios.config.json//ios工程配置 ├── package-lock.json ├── package.json//專案npm包管理 ├── platforms//平臺模版目錄 │├── ios//ios原生平臺目錄 │└── android//android原生平臺目錄 ├── plugins//外掛下載目錄 │└── README.md ├── src//業務原始碼目錄 │└── index.we ├── tools//工具目錄 │└── webpack.config.plugin.js ├── web//web平臺目錄 │├── index.html └── webpack.config.js// webpack模組打包配置目錄 複製程式碼
不過，通過create命令建立的weex工程預設是不包含iOS和Android原生工程模版的。如果需要新增原生工程模板，可以切換到appName目錄後再安裝依賴，模版預設會被安裝到工程的platforms目錄下，官方提供的模版預設支援weex bundle除錯和外掛機制。安裝命令如下：
weexpack platform add ios//安裝ios模板 weexpack platform add android//安裝android模板 複製程式碼
安裝模版完成之後，會在工程目錄下增加如下的模版目錄。目錄結構如下：
├── platforms │├── ios │└── android 複製程式碼
當需要用到混合開發的時候，就可以使用原生開發環境開啟Android或iOS專案進行原生功能的開發。
開發與執行
使用create命令建立weex專案時，weex-toolkit工具已經為我們生成了標準專案結構。此時，開啟初始化的Weex專案並定位到“/src/index.vue”，該頁面是Weex的預設首頁。程式碼內容如下
<template>
<div class="wrapper">
<image :src="logo" class="logo" />
<text class="greeting">The environment is ready!</text>
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data () {
return {
logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
}
}
}
</script>
複製程式碼
執行weex專案前，需要先使用命令“npm install”來安裝專案的依賴，可以在package.json檔案中檢視與專案相關的依賴。然後，在專案的根目錄下使用命令“npm run dev & npm run serve”開啟watch模式和靜態伺服器。 開啟瀏覽器，輸入“ ofollow,noindex">http://localhost:8081/index.html”即可開啟一個預覽頁面，使用用Weex 提供的playground app掃描生成的二維碼即可在在手機上看到頁面在手機上的渲染效果，如下圖所示。
如果需要在模擬器或真機裝置上執行專案，可以使用下面的命令來啟動應用程式，並且在執行客戶端命令前請先啟動服務端服務。
weex run ios//在ios裝置上執行 weex run android//Android裝置上執行 複製程式碼
需要注意的是，在執行啟動命令前，請確保Android、iOS所需要的原生執行環境配置正確，並且需要先啟動模擬器或連線上移動裝置再執行啟動命令。
執行啟動命令後，如果專案編譯過程沒有出現任何的錯誤提示，系統會在執行時要求使用者選擇一個安裝的裝置，如下圖所示。
如果沒有任何錯誤，將會看到如系下圖所示的執行效果。
