概述
自從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腳手架方式，安裝的指令如下：
npm install -g vue-native-cli 建立項目
安裝vue-native-cli工具後，接下來就可以使用vue-native-cli的指令行來建立Vue Native應用。
vue-native init <projectName>
cd <projectName> 安裝依賴包
建立項目後，還需要安裝以下一些依賴包：
npm install vue-native-core vue-native-helper —save
npm install vue-native-script —save-dev Hello 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用來編寫條件語句。例如：
<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 類似。例如：
<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來實作導航邏輯，我們來看看下面的實作：