如何將原有 Weex 項目改形成 Vue 版本

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 中廢棄的語法，若是代碼中有以下寫法，建議先手動修改再作轉換。

1. 忽略 require('@weex-components') 語句，能夠經過 npm 包的方式引入外部組件。
2. 沒法轉換 repeat="list" 寫法，僅支持 repeat="item in list" 格式。
3. 不支持轉換 <script type="config"></script>，目前 Vue 中不支持原有的降級配置。

第二步，手動調整代碼細節

模板和樣式的轉換均可以藉助工具輕易轉換過來，<script> 中基本的語法也能夠轉換；可是因爲 javascript 的寫法比較靈活，僅僅使用工具作轉換，並不必定能完美過渡。工具只能處理語法可是理解不了代碼中的邏輯，在 Weex 和 Vue 的框架特性存在一些差別，有些差別仍是須要手動修改才能夠生效。

提示：在代碼中使用的「黑科技」越多，項目就越難以轉換。

樣式單位

在 .we 文件寫樣式時，開發者一般都不寫長度單位，默認會被視爲 px。在新的 Vue 版本的 Web 渲染器中，<style> 中的樣式將會直接轉化成 CSS class，若是不寫單位、瀏覽器將沒法正確識別，會致使在 Web 端沒法正常渲染。Native 環境中不受影響。

儘管不影響 Native 頁面的渲染，也建議給樣式長度加上單位 px。

舊框架中的內置屬性

• vm._app
  • vm._app.differ
  • vm._app.doc
  • vm._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 。