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。

注意: 在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表示最新

國內開發者可以考慮使用淘寶的 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 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>

關於 Weex 語法部分，你可以直接參考 Vue Guide，這里不再重復介紹。如果您想了解有關技術詳情的更多信息，請繼續閱讀下一節。並且不要忘記在 dotWe 寫代碼並隨時預覽
。