前言：本文預設你知道 Weex 是什麼，如果不清楚，可以閱讀官網進行了解。

Weex 目前提供了兩個腳手架工具來輔助開發和除錯：weex-toolkit 和 weexpack。weex-toolkit 功能侷限於對 weex 或 vue 頁面的開發輔助上，與 weex-playground 緊密結合。weexpack 是一個擴充套件功能強大的命令列工具，支援編譯成 Native 的安裝包，但是缺乏一些 debug 手段。

在這裡，我們推薦基於 weexpack 整合的 starter kit，結合兩者的優勢，快速入門。

在文末我們還提供了 cooking + weexpack 的解決方案來替代 weex，方便生成 Weex 專案。

第一步：安裝依賴

如果你還沒有安裝 Node.js，首先需要安裝 Node.js，可以通過官網安裝。

對於 Mac 使用者，我們推薦 Homebrew 進行安裝：

　　brew install node

安裝完成之後，可以使用以下命令來安裝 weex-toolkit 和 weexpack：

　　npm install -g [email protected] weexpack # weex-toolkit 只有 beta 版可以使用 Vue

之後你可以通過 weexpack 和 weex 命令來檢測是否安裝成功，它會顯示命令列工具的各項引數。

第二步：初始化

通過克隆或者下載 weex-vue-starter-kit 進行專案的初始化：

　　git clone [email protected]:elemefe/weex-vue-starter-kit.git

執行完成後，在 weex-vue-starter-kit 目錄中就創造了一個使用 Weex 和 Vue 模板的專案檔案，提供了 weex 和 weexpack 命令的支援，可以使用 weex 與 weexpack 命令的全部功能。

第三步：開發

專案為我們準備了一個與 weexpack create 初始化專案類似的目錄結構，我們只需要關注 src 目錄，像寫 Vue 那樣進行操作即可。

在 package.json 中提供了一些開發時的指令：

• build 原始碼打包

• dev webpack watch

• debug 開啟 debugger，相當於 weex debug

首先，我們通過 npm install（或者 Yarn） 安裝依賴，之後執行：

　　npm run dev

　　初始化時已經準備好了示例，我們可以在 src/index.vue 檢視原始碼：

　　<template><divclass="container">

　　<imagesrc=""class="bannar-image"/><text@click="changeMessage"class="message">{{ message }} </text><textclass="quotes">{{ quotes }} </text></div></template>

　　<style>.container{display:flex;flex-direction:column;align-items:center

　　}.bannar-image{width:200px;height:200px;}.message{padding-top:20px;padding-bottom:40px;color:#0055dd;font-size:28px;

　　}.quotes{font-size:16px;color:#666;}</style>

　　<>exportdefault{

　　data(){return{message:'Welcome to Use Weexpack!',quotes:'A Tool To Build WEEX Faster'};},methods:{changeMessage(){this.message='You click it!';}}}</>

如果你是已經有 Vue 開發經驗的開發者，可以很快通過 Vue 語法進行 Weex 應用的創造。

第四步： Playground

Playground 提供了開發階段的真機測試手段，我們只需要下載 Playground 並安裝到你的移動裝置即可開始測試和 Debug：

Playground 下載地址

Android 在下載安裝完畢之後通過掃描二維碼，即可在 Playground 中看到你的專案。

iOS App Store 中的版本暫不支援最新版本的 Vue，我們將會通過編譯 Playground 到移動裝置一文協助開發。

Weex 目前有很多瀏覽器無法表現的效果，我們強烈建議通過移動裝置模擬或者真機進行測試。

除了真機安裝外，我們還可以通過將 Playground 專案在本地執行並修改 IP 地址。

二維碼還可以幫助我們通過 Playground 進行 Debug，使用 npm run debug 命令即可。我們將通過 Debug 一文說明這個問題。

cooking + weex

我們也提供了 cooking + weex 的腳手架，替代 weex-toolkit 工具。直接通過 cooking 初始化專案，確保已經升級到 1.5.0 及其以上版本。

　　cooking create my-project weex

　　開始開發

　　npm run dev# 檢視二維碼npm run qrcode# 除錯npm run debug

　　打包

　　npm i weexpack -gnpm run distweexpack platform add ios # or androidweexpack run ios

作者：敖天羽

連結：https://zhuanlan.zhihu.com/p/25177344