抢先预览 NativeScript-Vue 2.0！

今年二月，我满怀自豪地在阿姆斯特丹 Vue.Amsterdam 大会的盛大舞台上宣布 NativeScript-Vue 1.0 正式发布。我们与它的创始人、社区领袖兼 Vue 大师 Igor Randjelovic 携手，向世界展示了一种使用单一代码库构建可下载的 iOS 和 Android 移动应用的全新方式，将 NativeScript 的强大功能与 Vue.js 的开发乐趣完美结合。

如今，NativeScript-Vue 已在生产应用程序中使用，包括 Catholic Answers App：

我自己也有几个 demo，展示了如何设计你的应用以打造美观的界面。例如，Elocute 是一款面向语言教师及其学生的网页和移动应用套件：

教师在网页 ( http://elocute.me ) 上输入文本，让学生在课堂上朗读，以测试他们的发音。学生在移动应用程序（如上图所示）上选择作业，对着设备朗读文本，语音转文本插件会将文本转录成文字。然后，后台会有一个算法对教师朗读的文本与学生转录文本的相似度进行评分。语言实验室的难题现在迎刃而解了！

或者 Picme，这是我创建的一个应用程序，用于演示 ML Kit 在设备上的速度，测试人类识别棘手图片的能力与使用图像标记 AI 的能力：

还没印象深刻？来看看我最新的应用 TarotMoji 怎么样？它目前还在开发中，你可以用它解读塔罗牌，而且充满了 Emoji 表情：

既然现在我们拥有使用 NativeScript-Vue 创建时尚、高性能原生应用的所有可能性，那么还有什么可以改进的呢？换句话说，这个酷炫的集成下一步会是什么？继续阅读！

变化 #1 - 文件夹结构

当我们首次启动通过 Vue CLI 创建 NativeScript-Vue 应用程序的标准系统时，移动应用程序的文件夹结构有点类似于通过 Vue CLI 搭建的 Web 应用程序脚手架的结构。

• 开发人员在文件夹中编写了应用程序的屏幕和逻辑/src，其中包含/assets、/components以及应用程序的其他部分，例如 Vuex 存储。
• 该/template文件夹包含/App_Resources移动应用程序存储其图标和启动画面的文件夹。此文件夹对于构建过程是必需的。
• 最后，移动应用程序的构建版本存储在dist包含所有资产的文件夹中，当应用程序准备发布时，这些资产最终将上传到应用商店。
• 该应用程序使用命令运行npm，例如npm run watch:ios启用 LiveSync，它会监视更改并在模拟器或设备上刷新应用程序。

在 NativeScript-Vue 2.0 版的 Vue-CLI 模板中，文件夹结构得到了显著简化，使其与标准 NativeScript 移动应用的文件夹结构保持一致。现在，当您要使用此模板时，只需导航到您希望应用所在的文件夹，然后vue init nativescript-vue/vue-cli-template myapp在终端中使用：。npm install应用的依赖项，即可开始使用：

安装此应用的依赖项后，您将看到一个包含您在预安装脚本中请求的元素的基本应用。然后，您可以使用标准 NativeScript 命令运行该应用，tns run ios / android --bundle以使 webpack 正常工作并启动 LiveSync：

新的文件夹结构更加简洁。所有您需要关注的文件都放在这个/app文件夹中，而您作为应用开发者，大部分时间都会花在这个文件夹中。构建文件则位于/platforms应用根目录下的文件夹中。它非常快捷、干净、整洁！

变化 #2 - 框架元素

NativeScript 4.0 引入了一个新Frame元素，允许开发者更改应用程序的根元素，从而方便跨应用页面共享通用元素。在框架的早期版本中，这个 Frame 元素是自动创建的，但现在不再如此。现在我们需要在模板中显式添加 Frame 元素。这没什么大不了的！Vue-CLI 模板已经满足您的需求：

new Vue({
  render: h => h('frame', [h(HelloWorld)]),
}).$start();

这是一个很小的变化，使用这些标准化模板可以很容易地处理。

变化 #3 - 并非真正的变化，而是一种增强：使用 Sidekick

由于旧版本的文件夹结构，您无法使用 Sidekick 工具来管理应用。Sidekick 是 CLI 的一个很好的抽象，可以让您的移动应用项目井然有序。猜猜怎么着？由于新模板提供了更类似于原生 NativeScript 的文件夹结构，您可以将其与 Sidekick 一起使用！点击此处下载 Sidekick 。

通过 Vue-CLI 搭建好项目后，您可以在 Sidekick 中打开它，然后管理构建。只需确保点击“webpack”开关，确保已启用 webpack，并充分利用它提供的本地和云端模拟器：

NativeScript-Vue 2.0 即将到来！现在，您可以使用我们的 vue-cli 模板创建应用。如果您已经在这个领域工作过，请关注NativeScript 博客，了解如何升级您的应用。如果没有，现在就行动起来！使用 NativeScript-Vue 2.0 创建您的下一个爆款移动应用！

需要帮助？请在Slack的 #vue 频道联系我们，并阅读NativeScript-Vue.org上的文档。使用Playground体验 NativeScript，无需任何承诺。

另外！我们将于 10 月 4 日举办一场关于 NativeScript 2.0 的网络研讨会。快来加入我们吧！点击此处注册