NativeScript-Vue 1.0入门

最近，NativeScript-Vue团队宣布了1.0版本的NativeScript-Vue🎉

顾名思义，NativeScript-Vue是一个将Vue.js集成到NativeScript中的项目，允许您使用Vue.js构建完全本机的iOS和Android应用程序。

在本文中，我们将探讨如何使用NativeScript-Vue开始构建第一个应用程序，并在此过程中回答一些常见问题。 让我们开始吧。

注意：本文最初发布于2018年3月5日在Vue.js开发人员博客上

选择环境

首先，使用NativeScript-Vue开发有两种方法。

• 选项1：在NativeScript Playground中工作：NativeScript Playground是基于浏览器的NativeScript开发环境，可让您开始编码而无需在开发计算机上设置本机iOS和Android SDK。
• 选项2：使用NativeScript CLI：NativeScript CLI是用于创建，构建和运行NativeScript应用程序的命令行界面。 由于NativeScript CLI会生成实际的iOS和Android二进制文件，因此必须安装必要的本机依赖项才能使用CLI进行开发。

在本文中，我们将开始使用NativeScript Playground进行开发，因为它是学习NativeScript-Vue如何工作的好工具，而无需经历设置本地环境的麻烦。 之后，我们将介绍设置本地NativeScript-Vue开发工作流所需采取的下一步。

现在，让我们深入研究并开始构建。

使用NativeScript游乐场

首先访问https://play.nativescript.org/?template=play-vue，它将打开预加载了Vue模板的Playground。 您会看到的第一件事是如下所示的提示。

要使用NativeScript Playground，您需要在iOS或Android设备上下载并安装两个应用程序。 第一个应用程序“ NativeScript Playground”可以扫描您在浏览器中看到的QR码，第二个应用程序“ NativeScript Preview”是可以运行您在浏览器中编写的代码的应用程序。 这是您需要做的。

1. 在iOS或Android设备上下载并安装NativeScript Playground和NativeScript Preview应用程序。 如果您有多个设备，则可以在所有设备上安装这些应用程序。 Playground允许您同时在多个设备上进行开发，这非常酷。
2. 打开设备上的NativeScript Playground应用程序，然后点击“扫描QR码”选项。

继续并在您的Playground中扫描QR码（不是本文中的QR码）； 您应该在设备上看到以下应用。

这个应用程序看似简单，但实际上却是一件很特别的事情：您在屏幕上看到的用户界面组件不是DOM元素-它们完全是本机Android和iOS控件。 具体来说，您在应用程序中看到的文本控件是iOS上的UILabel和Android上的android.widget.TextView 。

NativeScript的强大功能是您可以使用JavaScript和Vue等框架来使用这些本机控件。 酷吧？

现在您已经启动并开始运行，让我们开始进行一些更改。 例如，继续并更改应用程序的控件之一的text属性，然后使用Cmd + S （或Windows上的Ctrl + S ）保存更新。 您应该会在设备上自动看到更改。

注意：我根本没有加快gif的速度-Playground的速度确实如此之快。 自己尝试一下！

让我们通过这个例子做更多的事情。 Playground提供了一系列组件，您可以轻松地将它们拖放到代码中以添加到应用程序中。 抓住一个按钮控件（如果找不到它，请参考下面的gif），然后将该组件拖动到应用程序的模板中。 保存所做的更改，您应该会看到一个按钮自动出现在设备上。

现在您已经在Playground上玩了几分钟，让我们仔细看一下此按钮示例的语法。

学习任务2：NativeScript布局

因为NativeScript不使用HTML或DOM，所以NativeScript无法复制许多Web布局概念，例如float和display: block|inline 。 因此，您必须学习一些在屏幕上组织用户界面组件的新方法。

不过，有两个好消息。 首先，NativeScript确实具有可在iOS和Android上运行的完整flexbox实施-这意味着，您可以对大多数布局任务使用熟悉的语法。

其次，NativeScript团队有一个专门用于教授非Flexbox NativeScript布局的站点。 当您准备好认真对待NativeScript-Vue时，值得花30分钟时间浏览该站点上的教程。

学习任务3：NativeScript CLI

在本文中，我们从基于浏览器的NativeScript学习环境NativeScript Playground开始。 尽管Playground非常适合入门，但最终您还是需要为NativeScript开发设置本地环境。 本地环境允许您为iOS App Store和Google Play编译应用程序，在应用程序中使用NativeScript插件，并利用诸如webpack和.vue文件之类的工具。

要进行本地开发，您需要首先从npm安装NativeScript CLI。

 npm install -g nativescript 

接下来，这是棘手的部分，您需要设置适当的iOS和Android依赖项，以便在开发计算机上执行构建。 NativeScript文档提供了完整的指南，可以指导您完成整个过程，但是由于其中有很多动态内容（不同的npm版本，不同的Android版本等），因此很容易陷入困境。

注意：如果您在安装过程中遇到问题，则NativeScript社区论坛是寻求帮助的好地方。

完成设置后，您将能够使用NativeScript CLI来构建，运行和部署NativeScript-Vue应用程序。 例如，您可以使用以下命令来创建新的NativeScript-Vue应用。

 tns create sample-app --template nativescript-vue-template 

接下来，您可以使用tns run android命令在Android模拟器或USB连接的Android设备上运行您的应用。

 tns run android 

最后，您可以在macOS上使用tns run ios命令在iOS模拟器或USB连接的iOS设备上运行您的应用程序。

最后，您可以在macOS上使用tns run ios命令在iOS模拟器或USB连接的iOS设备上运行您的应用程序。

 tns run ios 

从这往哪儿走

一旦您了解了NativeScript用户界面组件，弄清了NativeScript布局是如何工作的，并降低了NativeScript CLI的使用范围，便可以使用NativeScript-Vue构建下一个移动应用程序了。 在继续进行更高级的NativeScript-Vue开发时，这些其他链接可能会有用。

• 调试-NativeScript包含一个基于Chrome开发者工具构建的集成调试器。 调试器允许您单步执行JavaScript代码，查看控制台，监视网络请求，甚至查看iOS和Android应用程序的外观树。

• NativeScript的工作方式-在开始构建高级应用程序时，最好能确切了解NativeScript如何使您能够使用JavaScript构建本机iOS和Android应用程序的背景知识。

• NativeScript插件—尽管NativeScript提供了许多现成的跨平台API，但NativeScript插件生态系统提供了您的应用程序可能需要的数百种其他API。 花几分钟时间仔细阅读NativeScript市场，看看那里有什么是值得的。

• NativeScript社区Slack — NativeScript-Vue团队在NativeScript社区Slack的#vue频道中闲逛。 Slack渠道是结识其他NativeScript-Vue开发人员，询问您可能遇到的任何问题，甚至参与集成开发的好地方。

包起来

总而言之，NativeScript-Vue提供了一种令人兴奋的新方法，可以使用Vue.js构建iOS和Android应用程序。

NativeScript-Vue入门的最佳方法是在NativeScript Playground中，因为它使您无需在本地设置iOS和Android开发环境即可开始使用。 熟悉基础知识后，下载并安装NativeScript CLI，然后尝试使用NativeScript CLI模板之一。 如果您有任何疑问，请访问NativeScript社区论坛和Community Slack。

最重要的是-玩得开心you非常酷，您可以使用Vue.js构建完全本机的iOS和Android应用程序，所以请尝试一下！

参加免费的Vue.js入门课程！ 在此30分钟的视频介绍中，了解Vue是什么，可以使用它构建什么样的应用程序，它与React＆Angular的比较，以及更多内容。 免费注册！