NativeScript-Vue，了解一下？

seal_de 發布于2019-08-22 14:58 / 2514人閱讀

摘要：今天偶爾再打開的官網，發現首頁部分多出了這一選項可見官方對于與的結合是非常的支持的。，這個模板是目前最穩定和多功能的模板，可以使用單文件組件，，。但是不管怎樣，與的結合是一件很酷的事情，也希望它能夠快速發展起來。

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。

GPU云服務器云服務器閃一下介紹一下整理一下測試一下

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93044.html

推薦給新手的35個好用的Vue開源庫

摘要：無論是開發新手還是經驗豐富的老手，我們都喜歡開源軟件包。所幸的是，隨著社區的不斷壯大，每天都會出現一些很好的軟件包。在下文中，我們將推薦一些非常好用的開源庫是一個非常易用的漸進式框架，用于構建用戶界面。的一個極簡主義的深色設計系統。無論是開發新手還是經驗豐富的老手，我們都喜歡開源軟件包。對于開發者來說，如果沒有這些開源軟件包，很難想象我們的生活會變得多么疲憊不堪，而且靠咖啡度日也會成...

oliverhuang 2019-08-23 14:59 評論0 收藏0
Vue 2019開發者圖譜

摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發者知識圖譜，它包含了所有開發過程中的關鍵部分。在數據展示前端導入導出圖表面板數據綁定等場景無需大量代碼開發和測試，可極大節省企業研發成本并降低交付風險。作為 Vue 的初學者，您或許已經聽過很多關于它的專業術語了，例如：單頁面應用程序、異步組件、服務器端呈現等，您可能還聽過和Vue經常一起被提到的工具和庫，如Vuex、Webp...

cgspine 2019-08-23 18:14 評論0 收藏0
Vue、React 和 Angular橫向比對（數據對比）

摘要：同比與去年同期的同比變化率。我們對調查報告進行分析數據統計時間與本文時間差距較遠，數據存在延后。這意味著你可以獲得語法高亮，支持以及更容易使用預處理器如或。的是一個類似語法的可選預處理器，并可在中進行編譯。一些歷史 Angular 是基于 TypeScript 的 Javascript 框架。由 Google 進行開發和維護，它被描述為超級厲害的 JavaScript MVW 框架...

fxp 2019-08-23 14:21 評論0 收藏0
搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品。基于后臺管理系統。快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 評論0 收藏0
搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品?；诤笈_管理系統。快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

source 2019-08-21 18:01 評論0 收藏0