NativeScript-Vue，了解一下？

seal_de 发布于2019-08-22 14:58 / 2482人阅读

摘要：今天偶尔再打开的官网，发现首页部分多出了这一选项可见官方对于与的结合是非常的支持的。，这个模板是目前最稳定和多功能的模板，可以使用单文件组件，，。但是不管怎样，与的结合是一件很酷的事情，也希望它能够快速发展起来。

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云服务器云服务器闪一下介绍一下整理一下测试一下

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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