NativeScript-Vue，瞭解一下？

What is NativeScript?

NativeScript 是一個可讓你用Typescript或JavaScript開發原生ios或android app的開源框架
在我寫下這篇文章的時候，github上的star數爲12k。

What is Vue.js?

Vue是一套用於構建用戶界面的漸進式框架。在我寫下這篇文章時，github上star數爲85k。

What is NativeScript-Vue?

用社區文檔的定義來講就是一個容許你用vue.js去開發原生應用的插件。

在我2月10多號上去github上看的時候，nativescript-vue的star數大概1k，寫這文章時我再上去看，已經快2k了。今天偶爾再打開nativescript的官網，發現首頁header部分多出了這一選項

You wanted Vue.JS integration witH NativeScript? You got it! Read about the 1.0 release now

可見nativescript官方對於nativescript與vue的結合是很是的支持的。

看到這些是否是很想嘗試一把用vue開發原生應用呢？？

嚐鮮，nativescript-vue

按照nativescript-vue社區文檔的內容，安裝好插件，配置好了環境。文檔上面目前提供了三個開發模板

• nativescript-vue-template，這個是最簡單的模板，上面還帶有幾個demo方便咱們查看。
• nativescript-vue-rollup-template，這個模板是目前最穩定和多功能的模板，可使用 .vue 單文件組件，scss，es2015。
• nativescript-vue-webpack-template，這個模板是目前star數目最多的模板，可使用 .vue 單文件組件，scss，es2015， stage-2， native/web code sharing

剛剛開始我打算用第二個或第三個，可是一直沒法正常工做，倒騰了一成天，最後用了第一個模板，對我來講最大的缺點就是沒法使用單文件組件。
一切都準備好了，該寫點什麼呢？猛地想起以前用react-native寫過一個簡單的demo，(demo地址：react-native電影簡介app)，這是一個模仿豆瓣實現了一個查看當前熱門電影和即將上映電影的簡單安卓端app，因而決定用nativescript-vue去重構一遍。

項目結構：

app
 |---api
      |---api               // 請求的接口
 |---App_Resources          // ios或android特定的資源(可暫時無論)
      |---Android
      |---iOS
 |---components             // 應用的各個組件
      |---cinema-list       // 電影院列表
      |---col-list          // 縱向列表
      |---coming-list       // 即將上映列表
      |---loading           // 加載過渡頁面
      |---more-list         // 更多電影列表
 |---images                 // 圖片資源
 |---router                 // 路由
      |---index
 |---views                  // 各個頁面
      |---cinemas           // 電影院頁面
      |---detail            // 電影簡介頁面
      |---home              // 首頁
      |---more              // 更多電影頁面
 |---app.css                // 全局css樣式
 |---app.js                 // app入口文件 
hooks
platforms
 |---android                // 編譯生成的代碼

技術棧

• nativescript-vue
• vue-router

由於對利用vue.js開發比較熟悉，因此整個過程還算比較順利。

效果

總結

nativescript的原理和react-native有點類似：提供一個運行環境，提供一個JavaScript引擎，android端是V8引擎，ios端是JavaScriptCore引擎，一個虛擬機上運行JavaScript代碼，均可以調用平臺api和ui組件。而nativescript更專一於建立一個與平臺無關的單一的開發體驗，react-native則是抽象業務邏輯的同時，支持每一個平臺UI呈現固有的差別，並把重心放在高性能的渲染和執行上面。

到此爲止，項目算是重構了出來，重構的過程是比較愉快的，效率比較高，可是雖然僅僅是隻有4個主要頁面的簡單應用，比起原來react-native作的，nativescript-vue實現出來的應用明顯感受到渲染，導航，點擊事件的響應等的性能不是很好，能感受到較爲明顯的卡頓感。什麼緣由呢，一方面多是由於正如上面所說的二者的重心不同，另外一方面多是nativescript-vue的結合目前還不是很成熟。
可是無論怎樣，nativescript與vue的結合是一件很酷的事情，也但願它可以快速發展起來。

項目代碼github地址 有幫助的話，歡迎star。