使用 Vue.js 与 NativeScript 的简要介绍

欢迎来到 NativeScript 博客的 Vue.js 周！本周我们将为您带来大量与 Vue 相关的文章，重点关注 NativeScript-Vue 插件，该插件将 Vue.js 的世界带入原生移动应用程序开发。

本周即将推出的主题包括

使用 Vue.js 与 NativeScript 的简要介绍（等等...今天就是）
在 NativeScript-Vue 应用程序中使用插件（周二）
设置强大的 NativeScript-Vue 开发环境（周三）
Elocute 的编写和重写（周四）

今天，我们将重点介绍 NativeScript-Vue 的初学者内容。想想以下问题：为什么我可能想要使用 Vue（而不是 Angular 或纯 JavaScript）？如何开始使用 NativeScript-Vue？接下来我该去哪里？

说到这里，让我们开始吧！

提示：在 YouTube 上观看 NativeScript-Vue 2.0 网络研讨会 NativeScript-Vue 2.0：重返 Vueture

为什么选择 Vue.js？

Vue.js 框架于 2014 年由前 Google 工程师尤雨溪首次发布。在 Google 工作期间，尤雨溪是 AngularJS（不要与 Angular 混淆 😀）的重度用户，这在我们开始区分这两个框架时很有意义。

尤雨溪在 AngularJS 中的经验启发他编写了一个新的框架，该框架比 Angular 更轻量级，或者至少感觉不那么复杂。这项工作变成了我们今天所知的 Vue.js。

如今，Vue 成为最受欢迎的 JavaScript 框架之一，仅次于 Angular(JS) 和 React。为什么？核心库只有 20KB，却包含足够强大的功能，使其成为 Angular 或 React 的引人入胜的替代方案。Vue 包含以下功能

虚拟 DOM；
模板；
事件处理；
反应式和可组合的视图组件；
基于 CSS 的过渡和动画；
计算属性；
高性能和专注的核心库；
以及更多...

听起来有点像 AngularJS 吗？

快进➡️到 2017 年。NativeScript 凭借其 Angular 集成迅速发展。但不可否认，Angular 并不适合所有人，而 NativeScript Core（也称为原生 JavaScript）选项并未为其他人提供足够的结构。由于 NativeScript 框架的可扩展性，很明显 Vue.js 集成是可以实现的。于是出现了 Igor Randjelovic 和 NativeScript-Vue

成功使用 @vuejs 实例控制 @NativeScript 原生标签！无法表达我对标签的喜悦 😂 pic.twitter.com/BQUdxNEfEJ
— Igor Randjelovic (@igor_randj) 2017年4月19日

什么是 NativeScript-Vue？

开源的魅力在于，看到任何受到公正启发且技术娴熟的人在您提供的基础上进行构建。Igor 的 NativeScript-Vue 概念立即被 NativeScript 开发者关系团队和一些杰出的社区成员所接受。我们都意识到我们手中拥有了一些特殊的东西。

那么 NativeScript-Vue 是什么？简单来说，它是一个插件，使 Vue.js 可以与 NativeScript 一起使用。它不是 Vue 的分支，也不是 NativeScript 的分支。它建立在这些框架的功能之上，为您提供了一种使用这款广受好评的新工具创建真正原生、跨平台应用程序的方法。

由于 Vue.js 不会（直接）与浏览器的 DOM 交互（类似于 React 和 Angular），因此您可能认为仅适用于 Web 的代码在 NativeScript 应用程序中也能正常工作（除了不同的模板语法）。

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

new Vue({
  methods: {
    onButtonTap() {
      console.log("You tapped the button!");
    },
  },

  template: `
    <Page class="page">
      <ActionBar title="Home" class="action-bar" />
      <ScrollView>
        <StackLayout>
          <Label text="Hello World!" />
          <Button text="Tap Me" @tap="onButtonTap" />
        </StackLayout>
      </ScrollView>
    </Page>
  `,

}).$start();

现在，如果您在这里，您可能

希望创建原生 iOS 和/或 Android 应用程序（混合解决方案无法满足需求）；
希望继续使用 JavaScript；
希望继续使用（或开始使用！）Vue.js。

那么有什么问题吗？

从 Web 过渡到原生移动并非没有一些学习曲线。当以 NativeScript 的方式学习 Vue.js 时，您需要考虑

您需要学习 NativeScript CLI 或 NativeScript Sidekick 的内部工作原理；
您需要理解 NativeScript UI 元素的概念（可以将其视为 DOM 的一个更好的版本😉）。

如何开始？

如果您不熟悉 NativeScript，我表示歉意，因为我有点超前了。NativeScript 是一个开源（Apache 2 许可）框架，用于从一个代码库构建原生、跨平台的移动应用程序。可以将其理解为 JavaScript + CSS + XML 风格的标记，加上一点 NativeScript UI 魔法，将这

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" xmlns:calendar="nativescript-ui-calendar">
    <ActionBar title="Home" class="action-bar"></ActionBar>
    <StackLayout>
        <calendar:RadCalendar />
    </StackLayout>
</Page>

...变成这

radcalendar example

有关 NativeScript 入门的更多信息，请查看我们的教程。

在寒暄过后，让我们快速了解一下如何使用 NativeScript-Vue 创建一个可在 iOS 和 Android 上同样出色运行的快速应用程序。

NativeScript Playground

有几种不同的方法可以真正深入了解 NativeScript

它们各有优势，但今天我们希望采用最便捷的途径，我认为 Playground 是最佳选择。

NativeScript Playground 提供了一个基于 Web 的环境，用于快速搭建示例应用程序。无论您是在尝试使用 NativeScript 还是想与他人共享代码示例，Playground 都是编写代码并在物理设备上运行代码的理想方式，干扰最小。

要真正了解 NativeScript Playground 的强大功能，您需要从 App Store 或 Google Play 下载几个免费应用程序

iOS：Playground 和 Preview
Android：Playground 和 Preview

两个应用程序？怎么回事！？一个应用程序（Playground）允许您扫描 Playground 提供的 QR 码，并将您的代码加载到另一个应用程序（Preview）中。您可以将 Preview 视为应用程序运行其中的某种虚拟容器。

入门

打开 NativeScript Playground 后，单击新建菜单并选择创建一个新的 Vue.js 实例（如果您尚未使用 Vue 模板）。

nativescript playground and vue.js

接下来，单击QR 码菜单选项，并使用之前下载的设备上的NativeScript Playground 应用程序扫描该代码。您应该会看到类似以下内容

playground app running on device

好的，这不是原生移动应用程序的最酷示例。但它是一个原生应用程序，使用原生 UI。让我们稍微美化一下！

继续删除 <StackLayout> 标记内的所有内容。然后，通过从组件菜单中拖放，添加 <Image> 和 <Button> 元素

nativescript playground components

...到您的代码中（在 <StackLayout> 标记内）。

生成的模板应如下所示

<Page class="page">
    <ActionBar title="Home" class="action-bar" />
    <ScrollView>
        <StackLayout class="home-panel">
            <Image src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" />
            <Button text="Button" @tap="onButtonTap" />
        </StackLayout>
    </ScrollView>
</Page>

当您点击保存按钮（或仅按 cmd/ctrl-S）时，您应该会看到应用程序在您的设备上自动刷新。

我们现在可以使用 NativeScript Core 主题对其进行一些美化。此主题随每个新的 NativeScript 应用程序一起提供，并使用类应用于各个 UI 元素。继续在您的 <Button> 元素中添加 class="btn btn-primary"。您应该会得到一个外观更漂亮（但仍然是原生）的按钮

nativescript playground styled button

您可能还注意到 Playground 为您填充了 methods 对象，其中包含 onButtonTap 方法

methods: {
    onButtonTap() {
        console.log("Button was pressed");
    },
},

继续点击按钮。在 Playground 中，您应该会在设备日志中看到一个条目，这是一种执行基本调试的好方法

nativescript playground device logs

此时，您应该考虑登录以保存（并与他人共享）您的 Playground。

嘿，您现在是 NativeScript 和 Vue 开发人员了！无需编写任何代码！😜

接下来是什么？

世界是你的牡蛎，但现在，请在本周持续关注 NativeScript 博客，您将从一些比我聪明得多的人那里学到更多东西。

但是，如果您渴望获得更多 NativeScript-Vue 内容，请查看 nativescript-vue.org 上提供的快速入门，并不要忘记注册 NativeScript-Vue 网络研讨会！