使用 dotWe 對(duì) Weex 嘗鮮是一個(gè)不錯(cuò)的選擇，但如果你想更專(zhuān)業(yè)的開(kāi)發(fā) Weex陨囊， dotWe 就不怎么夠用了苍蔬。本節(jié)會(huì)教你如何搭建本地開(kāi)發(fā)環(huán)境進(jìn)行 Weex 開(kāi)發(fā)麦牺。
第一步：安裝依賴(lài)
Weex 官方提供了 weex-toolkit 的腳手架工具來(lái)輔助開(kāi)發(fā)和調(diào)試惰蜜。首先昂拂，你需要 Node.js 和 Weex CLi。
安裝 Node.js 方式多種多樣抛猖，最簡(jiǎn)單的方式是在 Node.js 官網(wǎng) 下載可執(zhí)行程序直接安裝即可格侯。
對(duì)于 Mac，可以使用 Homebrew 進(jìn)行安裝：
brew install node
安裝完成后财著，可以使用以下命令檢測(cè)是否安裝成功：
$ node -v
v6.11.3
$ npm -v
3.10.10
通常养交，安裝了 Node.js 環(huán)境，npm 包管理工具也隨之安裝了瓢宦。因此，直接使用 npm 來(lái)安裝 weex-toolkit灰羽。
npm 是一個(gè) JavaScript 包管理工具驮履，它可以讓開(kāi)發(fā)者輕松共享和重用代碼鱼辙。Weex 很多依賴(lài)來(lái)自社區(qū)，同樣玫镐，Weex 也將很多工具發(fā)布到社區(qū)方便開(kāi)發(fā)者使用倒戏。
注意: 在weex-toolkit1.0.8版本后添加了npm5規(guī)范的npm-shrinkwrap.json用于鎖定包依賴(lài)，故npm版本<5的用戶(hù)需要通過(guò)npm i npm@latest -g更新一下npm的版本恐似，使用前請(qǐng)確認(rèn)版本是否正確杜跷。
$ npm install -g weex-toolkit
$ weex -v //查看當(dāng)前weex版本
weex-toolkit也支持直接升級(jí)子依賴(lài)，如：
weex update weex-devtool@latest //@后標(biāo)注版本后矫夷，latest表示最新
安裝結(jié)束后你可以直接使用 weex 命令驗(yàn)證是否安裝成功葛闷，它會(huì)顯示 weex 命令行工具各參數(shù)：
第二步：初始化
然后初始化 Weex 項(xiàng)目：
$ weex create awesome-project
執(zhí)行完命令后，在 awesome-project 目錄中就創(chuàng)建了一個(gè)使用 Weex 和 Vue 的模板項(xiàng)目双藕。
第三步：開(kāi)發(fā)
之后我們進(jìn)入項(xiàng)目所在路徑淑趾，weex-toolkit 已經(jīng)為我們生成了標(biāo)準(zhǔn)項(xiàng)目結(jié)構(gòu)。
在 package.json 中忧陪，已經(jīng)配置好了幾個(gè)常用的 npm script扣泊，分別是：
build: 源碼打包，生成 JS Bundle
dev: webpack watch 模式嘶摊，方便開(kāi)發(fā)
serve: 開(kāi)啟HotReload服務(wù)器延蟹，代碼改動(dòng)的將會(huì)實(shí)時(shí)同步到網(wǎng)頁(yè)中
我們先通過(guò) npm install 安裝項(xiàng)目依賴(lài)。之后運(yùn)行根目錄下的 npm run dev & npm run serve 開(kāi)啟 watch 模式和靜態(tài)服務(wù)器叶堆。
然后我們打開(kāi)瀏覽器阱飘，進(jìn)入 http://localhost:8080/index.html 即可看到 weex h5 頁(yè)面。
初始化時(shí)已經(jīng)為我們創(chuàng)建了基本的示例蹂空，我們可以在 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>
