Weex 本身有一套語法規則，和 Vue 本身很相似，現在 Weex 與 Vue 有了官方合作，支持將 Vue 2.x 作為內置的前端框架，我們也推薦大家使用 Vue 2.x 的語法開發原生應用。對於現存舊版的 .we 文件，建議大家將其改造成 Vue 版本。
要解決的問題
將內核切換成 Vue 之后，原先基於 Weex 語法開發的項目將如何過渡到 Vue ？
首先需要明確一點：Weex 原有的前端框架也會繼續存在於 WeexSDK 中，依然支持 .we 文件格式的寫法。
此外，由於 .we 和 .vue 文件的格式本身就比較接近，所以遷移成本比較小，建議大家將現有 .we 格式的文件都轉換成 .vue 格式。我們也推出了相應的工具和方法輔助遷移，在內部也有大量的成功實踐，下邊將重點介紹一下將 .we 文件轉成 .vue 文件的方法。
第一步，借助工具實現語法轉換
首先介紹一個工具： weex-vue-migration ，它可以自動將 .we 文件轉為 .vue 文件，絕大多數的模板語法都能自動轉換，語法差異如下：
| Weex | Vue | |
|---|---|---|
| 生命周期 | ready: function() {} |
mounted: function() {} |
| 條件指令 | if="{{!foo}}" |
v-if="!foo" |
| 循環指令 | repeat="{{item in list}}" |
v-for="item in list" |
| 樣式類名 | class="btn btn-{{type}}" |
:class="['btn', 'btn-' + type]" |
| 內聯樣式 | style="color:{{textColor}}" |
:style="{ color: textColor }" |
| 事件綁定 | onclick="handler" |
@click="handler" |
| 原生事件 | onclick="xxx" |
@click.native="xxx" |
| 數據綁定 | src="{{rightItemSrc}}" |
:src="rightItemSrc" |
| 內容/槽 | <content></content> |
<slot></slot> |
| 數據初始化 | data: { value: 'x' } |
data: function() { return { value: 'x' } } |
| 標簽 ID | id="xxx" |
ref="xxx" |
| 獲取節點 | this.$el('xxx') |
this.$refs.xxx |
想要了解更多語法差異的細節，可以參考這篇文章：《Weex 和 Vue 2.x 的語法差異》 。
使用方法
首先安裝工具：
|
npm install weex-vue-migration -g
|
轉換文件：
|
weex-vue-migrate demo.we
|
轉換成功后，將會在當前目錄下生成 demo.vue 文件，控制台將會有如下輸出：
|
[Success]: Migrate demo.we => demo.vue in 33ms
Migration finished in 0.035s
|
除了逐個轉換 .we 文件以外，weex-vue-migration 還支持批量轉換整個目錄，參考其說明文檔可以了解更詳細的使用方法。
注意事項
轉換工具將不再支持 Weex 中廢棄的語法，如果代碼中有如下寫法，建議先手動修改再做轉換。
- 忽略
require('@weex-components')語句，可以通過 npm 包的方式引入外部組件。 - 無法轉換
repeat="list"寫法，僅支持repeat="item in list"格式。 - 不支持轉換
<script type="config"></script>，目前 Vue 中不支持原有的降級配置。
第二步，手動調整代碼細節
模板和樣式的轉換都可以借助工具輕易轉換過來，<script> 中基本的語法也可以轉換；但是由於 javascript 的寫法比較靈活，僅僅使用工具做轉換，並不一定能完美過渡。工具只能處理語法但是理解不了代碼中的邏輯，在 Weex 和 Vue 的框架特性存在一些差異，有些差異還是需要手動修改才可以生效。
提示：在代碼中使用的“黑科技”越多，項目就越難以轉換。
樣式單位
在 .we 文件寫樣式時，開發者通常都不寫長度單位，默認會被視為 px。在新的 Vue 版本的 Web 渲染器中，<style> 中的樣式將會直接轉化成 CSS class，如果不寫單位、瀏覽器將無法正確識別，會導致在 Web 端無法正常渲染。Native 環境中不受影響。
盡管不影響 Native 頁面的渲染，也建議給樣式長度加上單位 px。
舊框架中的內置屬性
vm._appvm._app.differvm._app.docvm._app.updateActions()
事件派發機制
$dispatch、$broadcast、$call方法已經廢棄。$emit行為不一致。
可以使用 Vuex 管理數據狀態。
直接操作 Virtual-DOM
Weex 和 Vue 中的 Virtual-DOM 格式並不相同，如果你使用了 this.$el('id') 獲取了某個組件的 element 之后，又修改了其中的某些屬性或者調用了某些方法，這些操作在 Vue 中很難找到直接的對應寫法。
從另一個角度講，我們也非常不建議在 Weex 或 Vue 項目中直接操作 Virtual-DOM，這些寫法都應該修改。
調整開發環境和工具
在文件轉換完成后，還需要重新調整一下開發環境。
文件的編譯
weex-loader 同時支持編譯 .we 和 .vue 文件，如果你使用的是 webpack 來配置編譯環境，將不需要做任何改變就能直接編譯 .vue 文件。
需要注意的是，Vue 本身就是一個獨立的前端框架，使用 Vue 編寫的項目在 Web 上完全可以不依賴 Weex 容器運行。在這種情況下，需要配置基於 vue-loader 的編譯腳本生成適用於 Web 平台 js 文件；然后引入 Vue 格式的 Weex 組件庫就可以在 Web 中。
輔助工具
Weex 提供了 weex-toolkit 的腳手架工具來輔助開發和調試、weex-pack 實現打包原生應用；同樣在 Vue 中也有 vue-cli 腳手架工具。Weex 和 Vue 的工具互相做了適配，建議在創建項目和開發 Vue 項目的時候使用 vue-cli ，在調試時使用 weex-toolkit，在打包原生應用時使用 weex-pack 。