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。