宣布 NativeScript-Vue 1.0 | NativeScript 博客

上周，在 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-Vue 的最佳地点是 NativeScript Playground，这是一个基于浏览器的 NativeScript 开发环境，让您无需在开发机器上设置原生 iOS 和 Android SDK 即可开始编码。

首先访问 https://play.nativescript.org/?template=play-vue，这将在 Playground 中打开一个预加载了 Vue 模板的窗口。您首先看到的是类似于这样的提示。

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

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

继续扫描 Playground 中的二维码（不是本文中的二维码），您应该在设备上看到以下应用程序。

这个应用程序可能看起来很简单，但请记住，您所看到的是一个完全原生的 iOS 和 Android 应用程序。标签组件不是您在 Web 上使用的 DOM <label>，而是 iOS 上的 UILabel 控件和 Android 上的 android.widget.TextView 控件。NativeScript 的强大之处在于您可以使用 JavaScript 和 Vue 使用这些原生控件。

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

changes

注意：我并没有加速那个 GIF 图像——Playground 真的就是这么快。亲自试试吧！

让我们用这个例子再做几件事。Playground 有一个组件集合，您可以轻松地将它们拖放到您的代码中以添加到您的应用程序中。获取一个按钮控件（如果您找不到，请参考下面的 GIF 图像），并将该组件拖放到您的应用程序的模板中。保存更改，您应该会看到一个按钮自动出现在您的设备上。很酷，对吧？

drag-and-drop

我们已经讨论了 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 界面。

提示：阅读使用 Vue 和 NativeScript 构建原生 iOS 和 Android 应用程序，以获得有关 NativeScript-Vue 语法和集成的更详细指南。

尝试拖放一些其他组件，感受一下 NativeScript-Vue 的工作方式（确保尝试一下图表和日历 😄）。准备好后，让我们接下来解决一些有关 NativeScript-Vue 的常见问题。

常见问题

现在您已经掌握了基础知识，让我们看看一些与 NativeScript-Vue 相关的常见问题。

如何开始本地开发？

虽然 Playground 非常适合开始使用 NativeScript-Vue，但最终您将需要设置一个本地开发环境。本地环境将允许您在您选择的文本编辑器或 IDE 中工作，将允许您安装和使用 NativeScript 插件，并且将允许您利用一些高级的 Vue 模板，让您可以做一些事情，例如使用 .vue 文件。

您需要从安装 NativeScript CLI 并设置适当的原生 iOS 和 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

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

tns run ios

提示：还有各种 NativeScript-Vue 模板，您可能想要根据您的个人偏好和项目需求查看。

有哪些示例？

在开始本地开发后，您可能想要查看一个功能更全面的 NativeScript-Vue 应用程序，以了解如何实现一些更高级的功能。

最好的示例是 Tiago Alves 构建的 NativeScript-Vue Groceries 示例。Groceries 示例使用 Vuex、Vue-router、NativeScript 动画等，因此，一旦您开始认真使用 NativeScript-Vue，它就是一个很好的参考。

请参阅 Groceries 示例的自述文件，了解有关运行该示例的详细信息。

谁在幕后支持 NativeScript-Vue？

NativeScript-Vue 是一个社区倡议，由 Igor Randjelovic 领导。尽管 NativeScript 团队的许多成员以某种方式参与了 NativeScript-Vue 项目，但 NativeScript-Vue 目前不是 Progress 的官方支持产品——这意味着，例如，NativeScript-Vue 不包括在 NativeScript 的开发者支持计划中。

注意：Progress 是 NativeScript 背后的公司。如果您以前没听说过我们——你好 👋 我们制作软件和相关的东西。

话虽如此，但 NativeScript 团队 100% 致力于确保 NativeScript-Vue 的成功。这意味着，我们将继续解决阻碍 NativeScript-Vue 项目的错误和问题，并在必要时提供帮助解决集成问题。

NativeScript 是一个开放平台，帮助集成（如 NativeScript-Vue）对我们来说非常重要。

这个已经准备好投入生产了吗？

这取决于情况。NativeScript-Vue 是否已经过多个大型企业构建关键任务软件的考验？没有。NativeScript-Vue 是否曾用于构建一些很酷的东西和有趣的示例？是的。

随着 1.0 版本的发布，NativeScript-Vue 团队希望您尝试一下这个版本，并自行决定。目前集成肯定存在一些问题，我们希望您能帮助我们发现这些问题，并帮助这个项目取得成功。

这种集成接下来会怎样？

虽然稳定性是该项目未来发展的主要关注点，但这里有一些即将推出的功能需要了解。

代码共享——我们正在开发一个基于 webpack 的官方模板，它将允许在移动应用程序和 Web 应用程序之间共享代码。您可以在 GitHub 上关注该项目。
vue-cli 3 支持——Vue 团队正在开发一个全新的 Vue CLI 工具，该工具目前处于 alpha 版本。我们希望能够添加对 NativeScript-Vue 的支持，使其成为常规 Vue 工作流程的一部分。

如何参与进来？

NativeScript-Vue 团队在 NativeScript 社区 Slack 中的 #vue 频道聊天。Slack 频道是结识其他 NativeScript-Vue 用户、提出任何您可能遇到的问题，甚至参与集成开发的好地方。

额外提示——我们有自定义的 Vue 相关表情符号，所以我的意思是。

vue-slack

此外，如果您喜欢直接深入代码，那么 NativeScript-Vue 的所有内容都是开源的，并在 GitHub 上。随意浏览，欢迎贡献！

接下来会怎样？

激动地想要了解更多吗？太好了！下个月我们将举办一场线上活动，详细介绍 NativeScript-Vue。我们将与 Igor 以及一些著名的 Vue 社区成员进行访谈。（我们甚至可能有一位非常特别的惊喜嘉宾 😉）

立即注册！ 🎉