十九、与其他框架的集成

在本章中，我们将探讨以下主题：

• 利用电子技术构建通用应用


• 将 Vue 与 Firebase 一起使用


• 创建带有羽毛的实时应用


• 使用 Horizon 创建反应式应用

Vue 功能强大，但如果您需要后端，它无法单独完成很多工作；您至少需要一台服务器来部署软件。在本节中，您将实际使用流行的框架构建小型但完整且可用的应用。Electron 用于将 Vue 应用带到桌面。Firebase 是一个现代的云后端，最后，FeatherJS 是一个简约但功能齐全的 Javascript 后端。完成这些操作后，您将拥有与它们交互并快速构建专业应用所需的所有工具。

Electron 是一个用于创建在 Mac、Linux 和 Windows 上运行的通用应用的框架。它的核心是一个精简版的 web 浏览器。它已被用于创建广泛使用的应用，如 Slack 和 Visual Studio 代码等。在此配方中，您将使用 Electron 构建一个简单的应用。

要构建此应用，我们将仅使用基本的 Vue 功能。电子不在本书的范围内，但对于本配方，不需要电子知识；事实上，这是进一步了解电子的一个很好的起点。

在这个配方中，我们将构建一个小型但完整的应用——pomodoro 应用。pomodoro 是一段大约 25 个单位的时间间隔，在这段时间里你应该集中精力做工作。之所以叫它是因为你通常用一个番茄形状的厨房计时器来测量它。此应用将跟踪时间，因此您不必购买昂贵的厨房计时器。

使用 Electron 启动 Vue 项目的最佳方法是使用 Electron Vue 样板文件（你没说！）。这可以通过以下命令轻松实现：

vue init simulatedgreg/electron-vue pomodoro


您可以使用默认值进行回答，但当询问要安装哪个插件时，只需选择vue-electron。使用npm intall安装所有依赖项，如果您愿意，您可以在使用npm run dev进行必要修改时通过热重新加载保持应用打开。您只需点击角落中的x即可隐藏开发工具：

首先，我们希望我们的应用是小型的。让我们转到app/src/main/index.js文件；此文件控制应用的生命周期。将窗口大小更改为以下大小：

mainWindow = new BrowserWindow({
height: 200,
width: 300
})


然后，我们真的不想把样板组件放在app/src/render/components文件夹中，所以你可以删除所有内容。相反，创建一个Pomodoro.vue文件并将此模板放入：

为了使其正常工作，我们还必须编写 Javascript 部分，如下所示：

这样，单击程序中的开始按钮将每秒减去 1 秒。单击停止按钮将清除计时器并将剩余时间重置为 1500 秒（25 分钟）。计时器对象基本上是setInterval操作的结果，clearInterval只是停止计时器正在执行的任何操作。

在我们的模板中，我们需要一个formattedTime方法，我们希望看到mm:ss格式的时间，这比剩下的秒数更容易让人读懂（即使这更古怪），因此我们需要添加计算函数：

computed: {
formattedTime () {
const pad = num => ('0' + num).substr(-2)
const minutes = Math.floor(this.remainingTime / 60)
const secOnds= this.remainingTime - minutes * 60
return `${minutes}:${pad(seconds)}`
}
}


要将此组件添加到应用，请转到App.vue文件并编辑以下行，替换landingPage占位符元素：

通过npm run dev启动应用，您现在应该能够在工作或学习时跟踪时间：

您甚至可以使用npm run build命令构建应用的可分发版本。

我们实现计时器的方式对于时间跟踪不是特别精确。让我们回顾一下代码：

this.timer = setInterval(() => {
this.remainingTime -= 1
if (this.remainingTime === 0) {
clearInterval(this.timer)
}
}, 1000)


这意味着我们每秒钟减少剩余时间。问题在于setInterval函数本身并非 100%准确，可能在 1000 毫秒之前或之后触发函数，具体取决于机器的计算负载；这样，误差可以累积并变成相当大的数值。更好的方法是在每次调用函数时检查时钟，并在每个循环中调整错误，尽管这里不讨论这一点。

由于 VueFire——一个包含 Firebase 绑定的插件，将 Vue 与 Firebase 一起用作后端非常容易。在本食谱中，您将开发一个功能齐全的气味数据库。

Firebase 不在本书的讨论范围内，但对于本食谱，我假设您已经熟悉基本概念。除此之外，您真的不需要知道太多，因为我们将在此基础上构建一个非常基本的 Vue 应用。

在开始编写代码之前，我们需要创建一个新的 Firebase 应用。为此，您必须在登录 https://firebase.google.com/ 并创建一个新的应用。在我们的例子中，它将被称为smell-diary。您还需要注意 API 密钥，该密钥位于项目设置中：

此外，您还需要禁用身份验证；转到“数据库”部分，在“规则”选项卡中，将“读取”和“写入”设置为 true：

{
"rules": {
".read": true,
".write": true
}
}


我们完成了 Firebase 配置。

打开一个干净的 HTML5 样板文件或 JSFIDLE，将Vue作为库。我们需要在文件头中使用脚本标记表示以下依赖项：

在body标记中编写 HTML 布局，如下所示：

{{cat.name}}

Cat Name

Cat Url

Add cat

第一个标签是猫的画廊。然后，构建一个表单，添加您收集的猫的新图像。

在body标记中，您始终可以使用以下行配置 Feathers 服务：

如果您使用npm start运行应用，您可以导航到控制台中写入的 URL 以查看您的新应用。打开另一个浏览器窗口，查看它如何实时更改：

看到实时添加的 CAT 显然是现代应用的一种方式。Feather 让您可以用一小部分代码快速创建它们，这要感谢底层的 Socket.io，它反过来使用 WebSocket。

WebSocket 其实并没有那么复杂，在本例中，Feather 所做的只是侦听通道中的消息，并将它们与向数据库添加内容等操作相关联。

当您只需交换数据库和 WebSocket 提供程序，或切换到 REST，甚至不需要触摸 Vue 代码，Feather 的强大功能就显而易见了。

Horizon 是一个构建反应式实时可伸缩应用的平台。它在内部使用 REJECTDB，并立即与 Vue 兼容。在这个配方中，您将构建一个自动的个人日记。

这个配方只需要一点 Vue 基础知识，但实际上不需要太多其他。

但在开始之前，请确保安装了 RejectDB。你可以在他们的网站（上找到更多信息 https://www.rethinkdb.com/docs/install/ 。如果您有自制软件，可以使用brew install rethinkdb安装。

此外，您还需要一个 Clarifai 代币。要免费获得一个，请访问https://developer.clarifai.com/ 并注册。您将看到应该在应用中编写的代码，如下图所示：

特别是，您需要clientId和clientSecret，它们以这种方式显示：

var app = new Clarifai.App(
'your client id would be printed here',
'your client secret would be here'
);


记下这段代码，或者准备好复制并粘贴到应用中。

写日记是一项艰巨的任务，你必须每天写很多东西。在这个食谱中，我们将建立一个自动日志，根据我们白天拍摄的照片为我们写作。

地平线将帮助我们记住一切，并在我们的设备之间同步日记。安装 RejectDB 后，使用以下命令安装 Horizon：

npm install -g horizon


现在，您可以使用新命令hz。输入hz -h检查；您应该看到如下内容：

要创建将承载我们的新应用的目录，请键入以下内容：

hz init vue_app


然后，进入新创建的vue_app目录，查看dist文件夹中的index.html。这是将作为服务器入口点的文件，请使用编辑器打开它。
您可以清除所有内容，只留下一个带有空的和的空 HTML5 样板文件。在 head 部分，我们需要声明对 Vue、Horizon 和 Clarifai 的依赖关系，如图所示：

转到指定的地址（第一行，而不是管理界面），您将看到以下内容：

您会注意到，如果打开了其他浏览器窗口，它们将实时更新。现在你终于可以不用打字每天写日记了！