~『 NO. 1 安裝依賴 』

Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發(fā)和調(diào)試。首先，你需要 Node.js 和 Weex CLi。

Node.js 安裝方式，請移步 Node.js 安裝

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

$ node -v
v6.11.3
$ npm -v
3.10.10

通常，安裝了 Node.js 環(huán)境，npm 包管理工具也隨之安裝了。

注意: 在 weex-toolkit1.0.8 版本后添加了npm5規(guī)范的 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表示最新

提示：
如果提示權(quán)限錯誤（permission error），使用 sudo關(guān)鍵字進行安裝

$ sudo npm install -g weex-toolkit

安裝結(jié)束后你可以直接使用 weex 命令驗證是否安裝成功，它會顯示 weex命令行工具各參數(shù)：

weex 命令行工具各參數(shù).png

~『 NO. 2 初始化 』

然后初始化 Weex 項目：

$ weex create awesome-project

執(zhí)行完命令后，在 awesome-project 目錄中就創(chuàng)建了一個使用 Weex 和 Vue 的模板項目

~『 NO. 3 開發(fā)』

之后我們進入項目所在路徑，weex-toolkit 已經(jīng)為我們生成了標準項目結(jié)構(gòu)。
在 package.json中，已經(jīng)配置好了幾個常用的 npm script，分別是：

• build: 源碼打包，生成 JS Bundle
• dev: webpack watch 模式，方便開發(fā)
• serve: 開啟HotReload服務(wù)器，代碼改動的將會實時同步到網(wǎng)頁中

我們先通過npm install安裝項目依賴。之后運行根目錄下的npm run dev & npm run serve開啟 watch 模式和靜態(tài)服務(wù)器。

然后我們打開瀏覽器，進入 http://localhost:8080/index.html 即可看到 weex h5 頁面。

初始化時已經(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>

1. 關(guān)于 Weex 語法部分，你可以直接參考 Vue Guide
2. 你可以在 dotWe 寫代碼并隨時預覽。
3. weex-toolkit 使用說明，請移步官網(wǎng)查看
4. Weex Playground 工具
5. Weex Market
6. Weex語法支持插件