使用 dotWe 對 Weex 嘗鮮是一個不錯的選擇，但如果你想更專業的開發 Weex， dotWe 就不怎么夠用了。本節會教你如何搭建本地開發環境進行 Weex 開發。
第一步：安裝依賴
Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和調試。首先，你需要 Node.js 和 Weex CLi。
安裝 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 是一個 JavaScript 包管理工具，它可以讓開發者輕松共享和重用代碼。Weex 很多依賴來自社區，同樣，Weex 也將很多工具發布到社區方便開發者使用。
注意: 在weex-toolkit1.0.8版本后添加了npm5規范的npm-shrinkwrap.json用于鎖定包依賴，故npm版本<5的用戶需要通過npm i npm@latest -g更新一下npm的版本，使用前請確認版本是否正確。
$ npm install -g weex-toolkit
$ weex -v //查看當前weex版本
weex-toolkit也支持直接升級子依賴，如：
weex update weex-devtool@latest //@后標注版本后，latest表示最新
安裝結束后你可以直接使用 weex 命令驗證是否安裝成功，它會顯示 weex 命令行工具各參數：
第二步：初始化
然后初始化 Weex 項目：
$ weex create awesome-project
執行完命令后，在 awesome-project 目錄中就創建了一個使用 Weex 和 Vue 的模板項目。
第三步：開發
之后我們進入項目所在路徑，weex-toolkit 已經為我們生成了標準項目結構。
在 package.json 中，已經配置好了幾個常用的 npm script，分別是：
build: 源碼打包，生成 JS Bundle
dev: webpack watch 模式，方便開發
serve: 開啟HotReload服務器，代碼改動的將會實時同步到網頁中
我們先通過 npm install 安裝項目依賴。之后運行根目錄下的 npm run dev & npm run serve 開啟 watch 模式和靜態服務器。
然后我們打開瀏覽器，進入 http://localhost:8080/index.html 即可看到 weex h5 頁面。
初始化時已經為我們創建了基本的示例，我們可以在 src/index.vue 中查看。
代碼如下所示：
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
<text class="desc">Now, let's use vue to build your weex app.</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
.logo { width: 360px; height: 156px; }
.desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>
<script>
export default {
data: {
logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
target: 'World'
},
methods: {
update: function (e) {
this.target = 'Weex'
console.log('target:', this.target)
}
}
}
</script>
