Vue.js 和 NativeScript 一分钟速览

小贴士：观看 NativeScript-Vue 2.0 网络研讨会，网址：NativeScript-Vue 2.0: Back to the Vueture

NativeScript 的支柱之一是框架本身的可扩展性。没有其他原生 JavaScript 框架像 NativeScript 一样灵活，能够支持像 Angular 这样的成熟框架，以及社区驱动的 Vue 集成，Preact 支持的初步尝试，以及对“原生”JavaScript（即 NativeScript Core）的持续承诺。

您知道吗？在早期，我们曾考虑将 NativeScript 命名为“Angular Native”？虽然我们非常喜欢 Angular，但我们不想把自己局限在一个特定的框架中。这就是为什么我们对 Vue 与 NativeScript 融合越来越受欢迎感到兴奋的原因。

几周前，我制作了一个简短的视频（大约一分钟），演示了使用 Vue 开发 NativeScript 应用程序。如果您错过了它，请查看以下内容。

请务必阅读 TJ VanToll 的精彩文章使用 Vue 和 NativeScript 构建原生 iOS 和 Android 应用程序

想要亲身体验？从零开始，使用 Vue 和 NativeScript 构建原生移动应用程序，一切尽在其中。

使用 Vue 与 NativeScript

您还没有安装 NativeScript？等等，您当然安装了。但以防万一

$ npm install -g nativescript

接下来，我们需要创建 NativeScript 项目。

$ tns create vue-test (or whatever you want to call your app)

导航到新创建的目录。

$ cd vue-test

安装 nativescript-vue 插件

$ npm install --save nativescript-vue

打开 app.js 文件，将现有内容替换为以下内容

const Vue = require('nativescript-vue/dist/index');

new Vue({
  template: `
    <page>
      <stack-layout>
        <label text="Hello Vue!" style="background-color:#41b883;color:#ffffff;padding:10;text-align:center"></label>
      </stack-layout>
    </page>
  `,
}).$start();

在我们继续之前，让我们快速了解一下这段代码中发生了什么。

我们正在引入 nativescript-vue 模块；
我们正在创建一个新的 Vue 模板，它只是 {N} 布局和 UI 组件；
我们正在调用 $start()，它会调用您可能更熟悉的 NativeScript application.start() 方法。

最后，在连接的 iOS/Android 设备或模拟器/仿真器上运行应用程序。

$ tns run ios | android

成功！

ios android nativescript vue

接下来做什么？

随着我们朝着 1.0 版本迈进，我们鼓励您尝试使用 nativescript-vue 插件。尝试所有 NativeScript 布局和 UI 组件。如果您有空，请查看开放问题，并与我们一起解决一些🐛！