如何将原有 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 。