返回博客首页
← 所有文章

我在 Vue.js 中开发 Groceries 示例应用程序玩得很开心，这就是原因

2017 年 10 月 19 日 - 作者 Tiago Alves

项目

几周前，我遇到了一个挑战，需要使用 Vue.js 和 nativescript-vue 插件构建 示例 Groceries 应用程序的克隆。原始的示例 Groceries 是一个使用 Vanilla JS 和 Angular 构建的应用程序，用作 NativeScript 应用程序的代码示例。这个演示应用程序是一种杂货店清单应用程序。它连接到 REST API 后端进行登录和存储。

我的目标不仅仅是简单地将应用程序从一个框架移植到另一个框架。相反，我想尽可能地将开发普通 Web Vue.js 应用程序的体验引入原生开发中，通过 NativeScript。这包括使用 .vue 单文件组件 (SFC)、Vuex、vue-router 以及 Vue.js 开发人员熟悉的模式和架构。

应用程序最终看起来是这样的

vue-groceries

开发体验

对于这个项目，我从 nativescript-vue-rollup-template 开始，因为它支持 .vue SFC 和实时同步。在开发 Groceries 应用程序时，我还添加了对 scss、根导入和 babel 的支持。

在这个环境中，开发感觉非常好。我在两个单独的终端中启动了 rollup -c -w 和 tns debug ios，每次保存文件时，应用程序都会自动更新在 iOS 模拟器中。从保存文件到应用程序在 iOS 模拟器中重新启动大约需要 20 秒。这并不太麻烦，因为所有这些都在后台发生，我们可以在后台做其他事情。它不像普通的 Web 开发那样快，但感觉比我之前真正的原生开发要快。Android 在物理设备上的体验与 iOS 模拟器类似。

命令 tns debug ios 还会打开一个 Safari 开发者工具窗口，允许检查代码、调试和监控网络请求。非常有用！

开发 UI 布局

由于这个应用程序是 示例 Groceries 应用程序的克隆，因此大多数布局只是被复制并“翻译”成了 Vue.js。

例如，ns-angular 模板

<StackLayout #signUpStack class="sign-up-stack" (tap)="toggleDisplay()" translateY="50"> 
<Label [text]="isLoggingIn ? 'Sign up here' : 'Back to login'"></Label> 
</StackLayout>

变成了

<StackLayout ref="signUpStack" class="sign-up-stack" @tap="toggleDisplay()" translateY="50"> 
<Label :text="isLoggingIn ? 'Sign up here' : 'Back to login'"></Label> 
</StackLayout>


你找到所有区别了吗？

  1. 第 1 行：标识符 #signUpStack 变成了 Vue ref；
  2. 第 3 行：事件 (tap) 变成了 @tap；
  3. 第 6 行：数据绑定 [text] 现在是 :text。

所有 NativeScript 组件、布局、动画、对话框 等都可以通过 nativescript-vue 使用！

提示：底层的 NativeScript 元素位于 Vue 组件的 nativeView 属性中。例如，在上面的示例中，我们将使用 this.$refs.signUpStack.nativeView 来访问 StackLayout API。

进行这些小的视觉平台特定调整非常容易。我只是将 platform-ios 或 platform-android 类添加到顶部 <page> 元素，然后使用 scss 来限定这些差异。这些调整非常小。超过 90% 的 css 对这两个平台都是通用的。

Vue.js 体验

如果你和我一样，来自 Vue.js 背景，那么 代码 会感觉非常熟悉。我已经提到了 .vue SFC，我使用它来组合应用程序，几乎和组合 Web 应用程序的方式一样。

对于状态管理，我使用了 Vuex（Vue 的 flux 实现），而对于页面路由，我使用了 vue-router。

基本上，nativescript-vue 为我们提供了两全其美！我们可以使用 Vue.js 的所有优点，并利用 NativeScript 提供的所有工具、组件、插件和 API。

当然，在开发过程中也遇到了一些障碍，但没有什么特别严重的。nativescript-vue 背后有一个强大的社区，他们正在努力磨平这些棱角。在 NativeScript 社区 Slack 中，特别是 #vue 频道，很容易获得 NativeScript 和 Vue 大师的帮助。

总而言之...

... 我在开发 Groceries 应用程序时玩得很开心。在花费大量时间研究混合框架和原生框架（例如 Quasar 和 Weex）之后，我认为我终于找到了一个功能齐全、稳定且有趣的技术，可以用于使用 Vue.js 进行原生开发：NativeScript！

感谢和致敬

特别感谢 Progress 赞助了这个开发实验！NativeScript 社区很荣幸拥有这样一家优秀的公司支持我们！

我还想感谢 Igor Randjelovic（nativescript-vue 的创建者）和 Jen Looper 一路以来的帮助和支持。