零、前言

自 2012 年由 Facebook 发布以来，GraphQL 在互联网上掀起了风暴。大型公司，如 Airbnb 和奥迪已经开始采用它，而中小型公司现在认识到这种基于查询的 API 的潜力。 GraphQL 一开始可能看起来很奇怪，但当您开始阅读和体验更多 GraphQL 时，您就不想再使用 RESTAPI 了。 通过本书中的食谱，您将了解如何从头开始构建一个完整的实时聊天应用。从创建 AWS Amplify 环境开始，您将深入研究开发第一个 GraphQL 模式。然后，您将学习如何添加 AppSync GraphQL 客户端并创建第一个 GraphQL 变体。本书还帮助您发现 GraphQL 的简单性和数据获取功能，使前端开发人员能够轻松地与服务器通信。稍后您将了解如何使用 Quasar 框架创建应用组件和布局。最后，您将了解如何在应用中创建 Vuex 模块，以管理应用状态，使用 GraphQL 客户端获取数据，并将应用部署到 web。

这本书是给谁的

本书面向希望向完整堆栈开发迈出第一步的中级 Vue.js 开发人员。如果您想了解更多关于使用自定义业务规则进行 Vuex 开发以及创建入门级企业体系结构应用的信息，本书非常适合您。在开始阅读本书之前，需要先了解 Vue.js 和 JavaScript。

这本书涵盖的内容

第 1 章、数据绑定、表单验证、事件和计算属性讨论了基本的 Vue 开发和组件概念，包括v-model、事件侦听器、计算属性和for循环。读者将了解用于表单验证的 Vuelidate 插件，以及如何在 Vue 组件上使用它，以及如何使用vue-devtools调试 Vue 组件。

第 2 章、组件、混搭和功能组件引导读者以不同的方式构建组件，包括内容定制槽、验证道具、功能组件和创建代码重用混搭。然后向读者介绍一组不同的方法来访问子组件的数据，创建依赖项注入组件和动态注入组件，以及如何延迟加载组件。

第 3 章，设置我们的聊天应用-AWS Amplify Environment 和 GraphQL，通过 AWS Amplify CLI 向读者介绍如何创建 Amplify Environment。使用 AWS Cognito（托管 bucket 的 S3 文件）创建他们的身份验证网关，最后创建 GraphQLAPI。在此过程中，读者将创建前端和后端之间通信的驱动程序。

第 4 章创建自定义应用组件和布局，从现在开始读者将开始应用的开发。在本章中，读者将创建用于创建聊天应用页面的组件。读者将创建类似于PasswordInput、AvatarInput、EmailInput等组件。

第 5 章创建用户 Vuex、页面和路由，引导读者构建应用的第一个 Vuex 模块，该模块将用于管理用户业务规则和存储用户数据。然后，读者将创建与用户相关的页面，用于注册、编辑和验证。最后，读者将把页面添加到 vue 路由模式中。

第 6 章创建聊天和消息 Vuex、页面和路由，读者将继续创建应用的 Vuex 模块。现在是创建聊天模块的时候了。此模块将包含用户之间通信的业务规则，并存储聊天数据。最后，用户将为对话列表和聊天页面创建聊天相关页面，然后将其添加到 vue 路由模式。

第 7 章，将您的应用转换为 PWA 并部署到 Web，在最后一章中，读者将通过将其转换为 PWA 应用、添加 iOS 设备的更新通知和安装横幅来完成应用。最后，用户将把应用部署到 web 上。

充分利用这本书

本书使用了第 2 章中的 Vue.js 2.7、组件、mixin 和功能组件等，因为它是撰写本文时对 Quasar 框架的最新支持版本。本书将包含 Vue.js 3 至第 3 章的代码，设置我们的聊天应用-AWS Amplify Environment 和 GraphQL。所有代码都将在 GitHub 存储库的最终版本中进行更新，如下所示：https://github.com/PacktPublishing/Building-Vue.js-Applications-with-GraphQL

您需要安装 Node.js 12+，Vue CLI 更新至最新版本，以及某种类型的良好代码编辑器。其他要求将在每个配方中介绍。所有软件要求都适用于 Windows、macOS 和 Linux。

下面是一个汇总所有要求的表格：

| 章节号 | 本书所涵盖的软件/硬件 | 下载链接 | 操作系统要求 | | 1 至 7 | Vue CLI 4.X | https://cli.vuejs.org/ | Windows/Linux/macOS | | 3 至 7 | 类星体 cli1.X | https://quasar.dev/ | Windows/Linux/macOS | | 3 至 7 | Visual Studio 代码 1.4.X 和 IntelliJ WebStorm 2020.2 | https://code.visualstudio.com/ | Windows/Linux/macOS | | 3 至 7 | AWS Amplify CLI 3.3.X | https://aws.amazon.com/appsync/resources/ | Windows/Linux/macOS | | 1 至 7 | Node.js 12+- | https://nodejs.org/en/download/ | Windows/Linux/macOS |

如果您使用的是本书的数字版本，我们建议您自己键入代码或通过 GitHub 存储库访问代码（下一节提供链接）。这样做将帮助您避免与复制和粘贴代码相关的任何潜在错误。

下载示例代码文件

您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书，您可以访问www.packtpub.com/support并注册，将文件通过电子邮件直接发送给您。

您可以通过以下步骤下载代码文件：

  1. 登录或注册www.packt.com。
  2. 选择“支持”选项卡。
  3. 点击代码下载。
  4. 在搜索框中输入图书名称，然后按照屏幕上的说明进行操作。

下载文件后，请确保使用以下最新版本解压或解压缩文件夹：

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Building-Vue.js-Applications-with-GraphQL 。如果代码有更新，它将在现有 GitHub 存储库中更新。

我们的丰富书籍和视频目录中还有其他代码包，请访问https://github.com/PacktPublishing/ 。看看他们！

使用的惯例

本书中使用了许多文本约定。

CodeInText：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例：“要执行此操作，请以管理员身份打开 PowerShell 并执行> npm install -g windows-build-tools命令。”

代码块设置如下：

<template>
 <header>
 <div id="blue-portal" />
 </header>
</header>

任何命令行输入或输出的编写方式如下：

> npm run serve

粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“单击电子邮件按钮，重定向到电子邮件注册表单”

Warnings or important notes appear like this. Tips and tricks appear like this.

小节

在这本书中，你会发现几个经常出现的标题（准备就绪、如何做……、如何工作……、还有更多……、另见。

要明确说明如何完成配方，请使用以下部分：

准备

本节告诉您配方中的预期内容，并介绍如何设置配方所需的任何软件或任何初步设置。

怎么做…

本节包含遵循配方所需的步骤。

它是如何工作的…

本节通常包括对上一节中发生的情况的详细解释。

还有更多…

本节包含有关配方的附加信息，以使您更了解配方。

另见

本节提供了有关配方的其他有用信息的有用链接。

联系

我们欢迎读者的反馈。

一般反馈：如果您对本书的任何方面有疑问，请在邮件主题中注明书名，并发送电子邮件至customercare@packtpub.com。

勘误表：尽管我们已尽一切努力确保内容的准确性，但还是会出现错误。如果您在本书中发现错误，如果您能向我们报告，我们将不胜感激。请访问www.packtpub.com/support/errata，选择您的书籍，单击 errata 提交表单链接，然后输入详细信息。

盗版：如果您在互联网上发现我们作品的任何形式的非法复制品，请您提供我们的位置地址或网站名称，我们将不胜感激。请通过copyright@packt.com与我们联系，并提供该材料的链接。

如果您有兴趣成为一名作家：如果您对某个主题有专业知识，并且您有兴趣撰写或贡献一本书，请访问authors.packtpub.com。

评论

请留下评论。一旦你阅读并使用了这本书，为什么不在你购买它的网站上留下评论呢？然后，潜在读者可以看到并使用您的无偏见意见做出购买决定，我们 Packt 可以了解您对我们产品的看法，我们的作者可以看到您对他们书籍的反馈。非常感谢。

有关 Packt 的更多信息，请访问Packt.com。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/12343.html