上周，在Vue.js阿姆斯特丹，Jen Looper和Igor Randjelovic宣布发布了NativeScript-Vue的1.0版本。

如果您是NativeScript-Vue的新手，该项目是一个NativeScript插件，允许您使用Vue.js构建原生iOS和Android应用程序。

在1.0版本中，NativeScript-Vue现在支持所有NativeScript的用户界面组件，因此现在是学习如何使用Vue.js构建本机移动应用程序的好时机。

在本文中，我们将回答有关NativeScript-Vue的一些常见问题，讨论下一步的内容，并讨论如何参与其中。但是，让我们首先看看如何尝试NativeScript-Vue。

入门

NativeScript-Vue入门的最佳位置是NativeScript Playground，这是一个基于浏览器的NativeScript开发环境，可让您无需在开发计算机上设置本机iOS和Android SDK即可开始编码。

首先访问https://play.nativescript.org/?template=play-vue，它会打开预装了Vue模板的Playground。你会看到的第一件事是看起来像这样的提示。

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

下载并安装这两个应用程序，打开设备上的NativeScript Playground应用程序，然后点击“扫描QR码”选项。

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

这个应用程序可能看起来很简单，但请记住，您所看到的是一个完全原生的iOS和Android应用程序。标签组件<label>不像您在网络上使用的那样; 它们实际上是UILabeliOS上的android.widget.TextView控件和Android 上的控件。NativeScript的强大之处在于您可以使用JavaScript和Vue来使用这些本机控件。

NativeScript Playground的强大之处在于，当您保存对应用程序代码的更改时，您会自动在设备上看到这些更新。例如，尝试更改某些标签的文本并使用Cmd+ S（或Windows上的Ctrl+ S）保存更改。您应该会自动在设备上看到更新。

让我们用这个例子做更多的事情。Playground有一组组件，您可以轻松地拖放到代码中以添加到您的应用程序中。抓住按钮控件（如果找不到，请参阅下面的gif），然后将组件拖到应用程序的模板中。保存更改，您应该会看到设备上自动显示一个按钮。很酷，对吧

我们已经谈到了NativeScript的强大功能和Playground的强大功能，但让我们花点时间考虑一下NativeScript-Vue的强大功能。让我们仔细看看这个按钮示例的语法。

const Vue = require("./nativescript-vue"); new Vue({ methods: { onButtonTap() { console.log("Button was pressed"); }, }, template: ` <Page> ... <Button text="Button" @tap="onButtonTap" /> ... </Page> `, }).$start();

如果您熟悉Vue.js，您可能会认识到这种语法，因为它与您在Vue.js Web应用程序中用于事件绑定的语法相同。实际上，基本上构建Vue.js Web应用程序所知的所有语法都可以直接应用于使用NativeScript-Vue中的本机用户界面组件。

例如，下面的代码使用Vue的数据绑定语法更改上一个示例的按钮的文本。

const Vue = require("./nativescript-vue");

new Vue({

data: {

buttonText: "Tap Me!"

},

template: `

<Page>

...

<Button :text="buttonText" />

...

</Page>

`,

}).$start();

NativeScript-Vue的强大之处在于您可以使用熟悉的Vue.js语法从单个代码库构建本机iOS和Android接口。

尝试拖动一些其他组件，以了解NativeScript-Vue的工作原理（确保专门尝试图表和日历）。当你准备好之后，让我们接下来解决一些关于NativeScript-Vue的常见问题。

如何开始本地开发？

尽管Playground非常适合开始使用NativeScript-Vue，但最终您还是希望设置本地开发环境。本地环境将允许您在文本编辑器或IDE中工作，允许您安装和使用NativeScript插件，并允许您利用一些高级Vue模板，使您可以执行使用.vue文件等操作。

您需要首先安装NativeScript CLI并在计算机上设置适当的本机iOS和Android依赖项。

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

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

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

tns run android

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

tns run ios

提示：您还可以根据个人喜好和项目要求查看各种NativeScript-Vue模板。

试了很久，搞不定，只是下载 一个NSPlayground .zip压缩包