Vue & Weex 介紹
Vue.js 是 Evan You 開發的漸進式 JavaScript 框架，在易用性、靈活性和性能等方面都非常優秀。開發者能夠通過撰寫 *.vue 文件，基於 <template>, <style>, <script> 快速構建組件化的 web 應用。
Vue.js 在 2016 年 10 月正式發布了 2.0 版本，該版本加入了 Virtual-DOM 和預編譯器的設計，使得該框架在運行時能夠脫離 HTML 和 CSS 解析，只依賴 JavaScript；同時 Virtual-DOM 也使得 Vue 2.x 渲染成原生 UI 成為了可能。
Weex 是一套簡單易用的跨平台開發方案，能以 Web 的開發體驗構建高性能、可擴展的原生應用。 Weex 與 Vue 有官方合作，支持將 Vue 2.x 作為內置的前端框架，Vue 也借此具備了開發原生應用的能力。
嘗鮮體驗
開始之前，希望你能對 Weex 和 Vue 有基本的了解，推薦閱讀 Weex Tutorial 和 Vue Introduction 了解更多信息。
快速創建項目
Weex 官方提供了 weex-toolkit 的腳手架工具來輔助開發和調試。
首先安裝 weex-toolkit 工具：
|
npm install weex-toolkit@beta -g
|
注：目前 weex-toolkit 僅在 beta 版中才支持初始化 Vue 項目，使用前請確認版本是否正確。
然后初始化 Weex 項目：
|
weex init awesome-project
|
執行完命令后，在 awesome-project 目錄中就創建了一個使用 Weex 和 Vue 的模板項目，生成的項目功能和用法可以參考其 package.json 和 README 。
編寫代碼
在創建了項目並且配置好了開發環境之后，我們就可以開始寫代碼了。
雖然開發的是原生應用，但是代碼寫起來和 Web 中並沒什么不一樣。你可以選擇自己喜歡的前端開發環境、可以寫 .vue 文件、也可以直接寫 javascript 文件、可以使用 ES6+ 、可以使用發布在 npm 上的模塊、可以擴展 Weex 的組件或者模塊。
注意事項
Vue.js 最初是為 Web 設計的，雖然可以基於 Weex 開發移動應用，但是 Web 開發和原生開發畢竟不同，在功能和開發體驗上都有一些差異，這些差異從本質上講是原生開發平台和 Web 平台之間的差異，Weex 正在努力縮小這個差異的范圍。
參考文章《Vue 2.x 在 Weex 和 Web 中的差異》了解存在差異的原因和細節。
使用其他工具庫
Vue.js 也有較多周邊技術產品，如 Vuex 和 vue-router 等，這些庫也可以在 Weex 中很好的工作。
關於 Vuex 和 vue-louter 的使用方法，可以參考《在 Weex 項目中使用 Vuex 和 vue-router》。
我們基於 Weex 和 Vue 開發了一個的完整項目 weex-hackernews ，引入了包含 Vue 2.x 的 WeexSDK，創建了三端的項目和基本的編譯配置。在項目中使用了 Vuex 和 vue-router ，能夠實現同一份代碼，在 iOS、Android、Web 下都能完整地工作。
擴展 Weex
Weex 內置了一些通用的組件和模塊，可以滿足基本上使用需求。為了控制 SDK 的體積和保持框架的通用性，我們會謹慎地選擇內置的組件和模塊，並不會包羅萬象將所有功能都封裝進 SDK。不過我們提供了額外的組件市場，在其中將能找到滿足不同需求、各式各樣的組件和模塊，此外 Weex 也具備橫向擴展的能力，開發者可以自行定制和擴展 Weex 組件和模塊。
Weex 的底層設計比較靈活，除了組件和模塊以外，開發者甚至可以定制 Weex 內置的前端框架，Vue 2.x 就是一個成功的例子。
可以閱讀以下文檔了解更多信息：
Vue 2.x 在 Weex 中的特色功能
我想，你一定對 Vue 為什么能渲染成原生頁面 、Weex 為什么能將內核切換成 Vue 心存好奇。如果你對這些細節感興趣，可以閱讀這篇文章 《how it works》。
流式渲染
在 Weex 中，我們可以通過 <foo append="tree|node"> 的方式定義頁面首次渲染時的渲染顆粒度，這讓開發者有機會根據界面的復雜度和業務需求對首次渲染過程進行定制。append="tree" 表示整個結點包括其所有子結點全部生成完畢之后，才會一次性渲染到界面上；而 append="node" 則表示該結點會先渲染在界面上作為一個容器，其子結點會稍后做進一步渲染。
表單控件綁定
在 Weex 中，我們針對 <input> 和 <textarea> 這兩個表單控件提供了和 web 體驗相同的 v-model 指令。通過 <input v-model="message"> 或 <textarea v-model="message">，開發者可以把數據 message 的值自動展示在文本框上，同時用戶修改了文本框的值的時候，數據 message 會自動被更新。
多頁面上下文隔離
如 Weex 工作原理文中所述，所有 Weex 的 JS bundle 公用一個 JavaScript 內核實例。所以如何能夠讓多個 JS bundle 中使用的 Vue 是完全隔離的，並且其中一個頁面對 Vue 進行擴展或改寫不會影響到其它頁面就變成了一個問題，通過 Weex 和 Vue 雙方的協作，這一問題已經得以解決。大家可以放心使用。
<transition> 過渡狀態
Weex 支持了 Vue 2.x 中經典的 <transition> 寫法，開發者可以通過 <transition> 輕松定義一個界面在兩種狀態中的過渡方式。