JavaScript的功能已经远远超出了浏览器的范围。现在，由于JavaScript不再仅仅用于构建网站，它几乎可以用于一切。JavaScript或者它的一个框架经常被一些开发者利用。 Vue.js开发公司浏览器，他们已经熟悉了这种语言，省去了他们学习新语言的麻烦。开发一个移动应用程序的必要性就是一个例子。利用Rick and Morty API，我们将开发一个小型应用，以展示Vue.js和NativeScript在创建跨平台移动应用方面的能力。
设计一个跨平台的应用程序是可能的吗？
原生应用程序可以在各种移动设备上运行，但它们都共享一个共同的代码库，而不是为每个平台从头开发。
究竟什么是Nativescript？
真正的原生应用程序可以使用NativeScript创建，这是一个开源框架。几家移动应用开发公司的开发人员可以利用当代网络技术，如Angular和Vue.js，或者只利用HTML、CSS和JavaScript/TypeScript来构建使用该框架的移动应用。对于iOS和Android开发，你可以使用相同的JavaScript代码库，而不是学习不同的本地语言，如Swift和Objective-C或Java和Kotlin。
使用Nativescript而不是脚本语言的好处是什么？
使用NativeScript，你可以使用Vue.js、Angular、TypeScript和普通的JavaScript创建移动应用程序。它是免费和开源的。它对自己的 "原生性能 "非常满意，这意味着它的扩展和学习都很快速和简单。值得注意的是，收购Telerik的Progress软件公司是NativeScript的支持者，并为开发者提供了一系列有用的UI工具。使用NativeScript，Vue Js的开发者可以创建像移动应用一样操作的移动应用，而且不需要一直使用WebView（混合应用）。在西方英语世界，NativeScript比Weex得到了更多的支持和记录。
选择一个设置
首先，NativeScript-Vue开发可以通过以下两种方式之一完成
**选项1：**在Native-Script的操场上工作。基于浏览器的NativeScript开发环境称为NativeScript Playground，它允许您开始编写，而无需在您的开发系统上安装原生的iOS和Android SDKs。
**选项2：**利用NativeScript的命令行界面。使用NativeScript CLI从命令行创建、开发和执行NativeScript程序。为了利用NativeScript CLI，您必须首先在您的系统上安装所需的本地依赖项。
NativeScript Playground是一个了解NativeScript-Vue如何工作的优秀工具，而不需要设置本地环境的麻烦。尽管在本教程中，我们将开始深入研究以另一种方式开发一个应用程序。就目前而言，让我们直接进入工作状态。
必要的标准
根据官方文档，你需要一些东西才能开始使用NativeScript。
- Node.js框架（最好是最新的）。
- NativeScript命令行界面。
- 使用NativeScript的操作系统设置。
更新所有的工具是本课最难的部分，因为如果不更新，构建过程很可能会失败。一旦你超越了设置过程，开发Vue.js应用程序与构建任何其他Vue.js项目是非常相似的。
为Node.js添加新功能
确保你使用的是最新版本的Node.js。在很大程度上，你如何管理NPM和Node将由你的操作系统来决定。这里有一篇来自David Walsh的文章，关于如何保持你的软件是最新的。如上所述，这篇文章已经过时了，他建议用NVM代替。
NativeScript的CLI
安装NativeScript CLI是下一步。如果一切按计划进行，你会被要求完成设置。
支持NativeScript的操作系统
安装 用于移动应用开发的NativeScript在您的操作系统上安装可能会花费最多的时间。您的操作系统的特定URL可以在NativeScript Vue文档中找到。在本指南中，我们假设您在Mac上工作并创建一个iOS应用程序。你现在应该在你的PC上安装了XCode，以便继续。
第一个步骤
既然你已经走到了这一步，让我们看看你是否已经正确地设置了你的环境。在这里，你可以选择两种学习材料的方法。NativeScript模板native script-vue/vue-cli-template可以在这里下载。下面是一个设置指南。
如果你愿意使用NS模板从头开始，请运行以下命令建立你的项目。你会被问到一系列关于你正在做的项目的问题，所以要做好准备。在本教程中，安装vue-router和vuex被选为是。另外，我们选择了浅色的配色方案，但可以随意使用你想用的颜色。当你安装时，你会有一个属于你自己的目录结构。这里有很多文件，目前来说，不用担心，我们会在以后的课程中讲到这些。
构建它
建立这个应用程序，看看接下来会发生什么。第一步是下载和安装必要的软件。下一步是在本地运行并启用调试功能。因为我们没有完全建立NativeScript，所以可能会有一些抱怨。如果你在建立NativeScript时没有遇到任何问题，你可以跳过下面两部分!
必须安装Nativescript
由于我们已经安装了NativeScript CLI，所以我们可以进行以下工作。
安装Xcode、Homebrew、Chrome、Java SDK和Android SDK只是一个开始。如果你确定要安装所有的东西，只需点击A接受所有的东西。这是开始的部分，是最不令人愉快的部分。在等待安装完成的过程中，可以喝杯你喜欢的饮料休息一下。
安装NativeScript云
我们将按照文档中的指示，通过运行某个命令来安装NativeScript云。这个过程应该不会像预期的那样耗时太久。现在让我们重试一下创建过程。有可能xCode会显示一个像这样的iPhone屏幕，如果这对你来说没有严重的问题。恭喜你，如果你正在读这个。现在可以使用你刚刚设置的工具建立一个本地应用程序。这正在测试中。
HelloWorld.vue是一个很好的开始，所以在你的项目中打开它并改变内容。只要你执行更新，所做的任何改变都将是可见的。扩展演示应用程序。现在我们已经建立了我们的应用程序，让我们看看如何向它添加一个新的屏幕或部分。
路由器
在新窗口中打开 src/router/index.js，将其添加到以下路径。作为说明，考虑一下下面的部分。接下来，让我们用一些非常基本的代码创建示例组件 src/components/Sample.vue。在主页上包括部分。请允许我把这个样本页的连接作为堆栈布局页面上的一个额外按钮。如果一切按计划进行，你的应用程序应该是这样的。
通过一些补充 使用NativeScript，可以轻而易举地放入一些最流行的应用程序表单组件。让我们在我们创建的示例页面上添加一个标准的日期选择器和按钮。现在它应该像这样出现在页面的主要内容上。
我们已经包含了DatePicker和Button元素，以及根据用户的输入来触发它们的使用的方法。我们将显示一个简单的警报提示框，并在日期改变时向控制台报告调用情况。让我们让按钮调出一个标准的动作提示，可以用于各种钩子。在这种情况下，我们将提供两种选择，并使用回调来管理结果。
结论
在短短几分钟内，我们就创建了一个由Vue.js驱动的原生应用!熟悉的Vue世界让你一开始就很容易忘记自己是在用NativeScript工作。如果你想了解更多关于如何设计一个真实世界的应用程序，请分享这篇文章并注册订阅新闻通讯。如果你想用Native script和vue.js开发一个移动应用，你也可以着手于 雇用移动应用程序开发人员掌握相关的知识和实践经验。
The postStep By Step Manual To Building Mobile Apps With Nativescript and Vue.jsappeared first onCMARIX Blog.
