概述
自从2015年4月React Native 发布以来后，关于移动跨平台的话题就层出不穷，不管是大公司还是小公司都在开始使用React Native 来开发跨平台App。不过，也有公司对React Native 并不看好，如Airbnb在去年就开始宣布弃用React Native ，不管如何，React Native 的跨平台的目的是很诱惑的。
紧接着google发布了跨平台框架Flutter，对于这个颠覆式的框架，可以说受到大多数开发者和公司的青睐，因为它是google开发的，目前活跃度明显超过了React Native。
自从Flutter诞生后，React Native已经感受到了压力，因此加快了优化的进度。去年底公布了优化方案，目前正在重构js引擎，最大提升js的性能问题。毕竟React Native低层还是基于原生的系统去做的，目前来看有一定的优势，而且社区庞大，短期用户量还是有的。Flutter虽然流畅，UI层独立，但是很多插件还是要基于原生系统架构，不能完全独立。
但是，不管是React Native还是Flutter，它们都不能脱离原生系统，除非android和iOS系统被另外一个系统取代。所以，不管未来如何，对于前端同学来说，React Native还是很有诱惑力的，它让前端同学有能力开发媲美原生应用的能力。
在前端框架中，作为仅次于React 的框架，Vue在国内的趋势可以说已经超过React，更是受到广大程序员的喜爱。正是基于此，一家名叫GeekyAnts 的印度公司开发了 Vue Native，病用它来开发基于 React Native 的跨平台应用。
Vue Native
安装
安装Vue Native可以使用vue-native-cli脚手架方式，安装的命令如下：
代码语言：javascript复制npm install -g vue-native-cli新建项目
安装vue-native-cli工具后，接下来就可以使用vue-native-cli的命令行来新建Vue Native应用。
代码语言：javascript复制vue-native init <projectName>
cd <projectName>安装依赖包
创建项目后，还需要安装以下一些依赖包：
代码语言：javascript复制npm install vue-native-core vue-native-helper —save
npm install vue-native-script —save-devHello Word
例如，下面是一个使用Vue编写的React Native程序，运行效果如下图：
和 React Native使用React一样，Vue Native使用的是Vue语法，开发者可以直接使用Vue语法来开发跨平台应用，对于熟悉Vue的开发者来说，使用Vue来开发移动应用可谓得心应手。 和React Native一样，使用vue-native-cli初始化一个新的 app时，app的入口文件为App.vue。并且，开发者可以使用很多.vue文件来组合一个新的.vue文件，在app编译时系统会将所有的vue 文件翻译成以.js 后缀的 React Native 组件，最后调用原生组件进行渲染。
指令
在 Vue 中，指令是可以说是一种特殊的属性，他们都以v-作为前缀。
v-if 和 v-else
v-if和v-else用来编写条件语句。例如：
代码语言：javascript复制<template>
<view class="container">
<view class="btn-container">
<button title="show A" :on-press="() => handleBtnClick('A')" />
<button title="show B" :on-press="() => handleBtnClick('B')" />
<button title="show C" :on-press="() => handleBtnClick('C')" />
</view>
<view>
<text v-if="type === 'A'">
A
</text>
<text v-else-if="type === 'B'">
B
</text>
<text v-else-if="type === 'C'">
C
</text>
<text v-else>
Not A/B/C
</text>
</view>
</view>
</template>运行效果如下：
v-for
当然，还使用v-for指令来写循环，和 JavaScript 的 map 类似。例如：
代码语言：javascript复制<template>
<view class="container">
<text
class="text-container"
v-for="todo in todos"
:key="todo.text"
>
{{ todo.text }}
</text>
</view>
</template>
<script>
export default {
data: function() {
return {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Build something awesome" }
]
};
}
};
</script>运行效果如下：
示例
KitchenSink
KitchenSink是一个使用Vue 重写的Vue Native应用，源码地址为：https://github.com/GeekyAnts/KitchenSink-Vue-Native，可以下载源码并进行二次开发。
Todo
除了KitchenSink外，你也可以下载ToDo 应用，它是GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 编写的Vue Native应用，下载地址为：https://github.com/ankitsinghania94/vue-native-todo-app
其他
Vue Native 使用vue-router来实现导航逻辑，我们来看看下面的实现：
应用的状态，使用的是Vuex，具体可以参考Vue官网 当然，这个库目前还在开发和升级中，并且React Native本来就很坑，Vue Native不过是为Vue开发移动应用提供了可能，还不好用目前并不好说。
