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。