搭建强大的 NativeScript-Vue 开发环境

注意：本文中的说明已过时。不过别担心；NativeScript-Vue 文档现在提供了有关设置强大开发工作流程的详细信息。此外，您可能还想查看我们的NativeScript-Vue 2.0 网络研讨会，以了解有关 NativeScript-Vue 最新更新的更多信息。

欢迎回到 NativeScript 博客的 Vue.js 周。作为提醒，以下是我们已发布和即将发布的文章的日程安排。

使用 Vue.js 与 NativeScript 的简要介绍（周一）
在 NativeScript-Vue 应用中使用插件（周二）
搭建强大的 NativeScript-Vue 开发环境（今天！）
Elocute 的编写和重写（周四）

今天，我们将超越基础知识，了解如何设置强大的本地 NativeScript-Vue 开发环境。让我们看看如何开始。

入门

首先，让我们回顾一下。如果您阅读了本周早些时候我们关于NativeScript-Vue 入门的文章，您就会知道，使用 NativeScript-Vue 入门有两种主要方法。第一种是NativeScript Playground，这是一个基于 Web 的环境，用于在浏览器中快速修改 NativeScript-Vue 应用。

在 NativeScript Playground 中，您可以更改 NativeScript-Vue 代码，并在设备上立即看到这些更改。

尽管 Playground 非常适合入门，但它并非没有局限性。Playground 基于浏览器，因此您无法使用自己喜欢的文本编辑器或 IDE。您也无法利用本地构建工具（例如 webpack），这些工具使您能够使用 .vue 文件构建应用。

因此，当您转向更高级的 NativeScript 开发时，您需要切换到第二个 NativeScript-Vue 开发选项：Vue CLI。让我们看看如何启动和运行。

设置依赖项

在开始讨论之前，先提醒大家一句：设置本地 NativeScript 开发环境可能具有挑战性，尤其是在您不熟悉移动开发的情况下。NativeScript 构建真正的原生 iOS 和 Android 应用程序，因此，您必须为 Android 和 iOS 设置本地环境才能为这些平台构建 NativeScript 应用。

不过也有一些好消息。首先，NativeScript 文档提供了一份全面的指南，引导您完成必要的设置，包括一个自动安装许多必要依赖项的脚本。如果您还没有完成，请先完成 NativeScript 安装。

setup
NativeScript 文档中的安装指南。在开始使用 NativeScript-Vue 本地开发之前，您需要完成这些步骤。

如果您在安装过程中遇到问题，NativeScript 和 NativeScript-Vue 社区将随时为您提供帮助。NativeScript 社区论坛是一个询问问题的好去处，如果您遇到困难；甚至还有一个专门用于入门问题的类别。

forum
如果您在入门时遇到困难，NativeScript 社区论坛是询问问题的好去处。

提示：作为获取帮助的另一种选择，NativeScript-Vue 社区也在 NativeScript 社区 Slack 上进行交流。加入我们！

一旦您安装了必要的 NativeScript 依赖项，让我们看看如何开始使用 NativeScript-Vue。

设置 NativeScript-Vue

从NativeScript-Vue 1.0开始，Vue CLI 是使用 NativeScript-Vue 开发应用的推荐方法。要使用 CLI，请首先使用以下命令从 npm 安装它。

npm install -g @vue/cli @vue/cli-init

如果您运行 vue --version，您可以确保安装成功。

vue-version
您可以使用 vue --version 命令检查您正在使用哪个版本的 Vue CLI。

注意：NativeScript-Vue 使用 Vue CLI 的 3.x 版本，在撰写本文时，该版本仍处于测试阶段。如果您想了解有关 Vue CLI 3.x 版本的更多信息，请查看这篇文章。

安装完成后，使用 vue init 命令使用 NativeScript-Vue 的默认模板创建一个新应用程序。例如，以下命令创建一个名为“hello-vue”的新项目。

vue init nativescript-vue/vue-cli-template hello-vue

运行该命令后，您的终端会提示您输入一些有关如何构建应用的问题。如果您愿意，可以随意自定义这些问题，但如果您只是刚刚开始，只需按几次 Enter 键接受所有默认值即可。

vue-new-app
vue init 命令允许您配置新的 NativeScript-Vue 应用。

之后，cd 到您的项目中，并使用 npm install 安装所有必要的依赖项。

cd hello-vue
npm install

这样，您就可以在 iOS 和 Android 设备上测试您的新应用了。让我们看看如何做到这一点。

运行您的应用

因为 NativeScript 应用是 iOS 和 Android 应用，所以您必须在 iOS 模拟器、Android 模拟器或 USB 连接的 iOS 或 Android 设备上运行 NativeScript 应用。

如果您在 Mac 上，并且之前完成了NativeScript 安装说明，则应该已安装了 Xcode，其中包含测试 iOS 应用所需的 iOS 模拟器。

注意 iOS 应用只能在 macOS 机器上构建。如果您有兴趣在 Windows 或 Linux 上构建 iOS 应用，请查看NativeScript Sidekick，这是一个 NativeScript 开发伴侣，它包括在云中构建应用的功能，从而可以在 Windows 和 Linux 上构建 iOS 应用。

对于 Android 开发，如果您还没有，您可能需要花点时间设置至少一个 Android 虚拟设备。如果您仍然需要创建一个，请查看有关如何操作的指南。

一旦您安装了模拟器，请返回到您的终端或命令提示符。接下来，您需要执行 npm run watch:<platform> 命令，其中 platform 为 ios 或 android。例如，在下面，我使用 npm run watch:ios 命令在 iOS 模拟器上启动我的应用。

ios-dev

使用 npm run watch 命令在 iOS 上运行应用。

在下面，我使用 npm run watch:android 命令在 Android 虚拟设备上启动我的应用。

android-dev

使用 npm run watch 命令在 Android 上运行应用。

提示：如果您从 watch 命令中省略了平台，也就是如果您使用了 npm run watch，则该命令会将您的应用部署到所有正在运行的 iOS 模拟器、Android 虚拟设备和 USB 连接的设备上。当您需要在多个设备上同时测试应用时，这非常有用。如果您对这种工作流程感兴趣，请查看我们关于从命令行启动 Android 模拟器和 iOS 模拟器的文章，因为您需要在运行 watch 之前启动模拟器，才能使此设置正常工作。

每个命令都需要大约一分钟才能完成，因为在后台，NativeScript 分别为 iOS 或 Android 生成一个实际的应用程序二进制文件，并在必要时将您的应用程序推送到这些模拟器和设备上。

完成后，您将获得一些非常酷的功能。要查看其运行效果，请在您选择的文本编辑器或 IDE 中打开新应用的 src/components/HelloWorld.vue 文件。找到 <Button> 组件的 text 属性，将 Tap me! 更改为其他值，然后保存文件。

您的 CLI 将自动检测更改，并将其推送到所有连接的设备上。以下是其运行效果。

cli

在这里，需要退一步来欣赏刚刚发生的事情。请记住，您看到的内容不是 Web 应用；您正在更新原生 iOS 和 Android 应用，使用原生 iOS 和 Android UI 组件，并且您正在使用 Vue.js 来完成！

总结

如果您从头到尾阅读了本文，那么您现在应该已经拥有了一个本地的 NativeScript-Vue 开发环境，以及一个可以用来更新应用并立即查看这些更改的工作流程。

接下来，您需要查看NativeScript-Vue 文档，以获取 NativeScript 元素的列表以及您可以使用它们执行的操作。您可能还想加入 NativeScript 社区 Slack，与其他 NativeScript-Vue 开发人员聊天。

最后，如果您有任何使用 NativeScript-Vue 的技巧或窍门，请随时在评论中分享！

注意：想要了解有关 NativeScript-Vue 的更多信息？请务必注册参加我们即将于 4 月 5 日举行的NativeScript-Vue 网络研讨会！