零、前言

Nuxt.js（在本书中我们称之为 Nuxt）是一个基于 Vue.js（在本书中我们称之为 Vue）的渐进式 web 框架，用于服务器端渲染（SSR。使用 Nuxt 和 Vue，构建通用和静态生成的应用比以往任何时候都更容易。本书将帮助您了解 Nuxt 的基本原理，以及如何将其与最新版本的 Vue 集成，使您能够使用 Nuxt 和 Vue.js 构建整个项目，包括身份验证、测试和部署。您将探索 Nuxt 的目录结构，并通过使用 Nuxt 的页面、视图、路由和 Vue 组件，以及编写插件、模块、Vuex 存储和中间件来创建 Nuxt 项目。此外，您将学习如何从头开始使用 Ko.js（我们将其称为 Koa 在本书），OpT4 标准膝关节炎 PHP 标准建议，Ty5 T5（MultD6，PSRs Ty7Ty），MunGDB 和 MySQL，以及使用 WordPress 作为无头 CMS 和 REST API。您还将使用 Keystone.js 作为 GraphQLAPI 来补充 Nuxt。您将学习如何使用 Socket.IO 和 referencedb 创建实时 Nuxt 应用和 API，并最终从远程 API（无论是 REST API 还是 GraphQL API）生成具有 Nuxt 和流资源（图像和视频）的静态站点。

这本书是给谁的

本书面向任何希望构建服务器端渲染 Vue.js 应用的 JavaScript 或完整堆栈开发人员。对 Vue.js 框架的基本理解将有助于理解本书中涵盖的关键概念。

这本书涵盖的内容

第一章介绍 Nuxt是您了解 Nuxt 主要功能的地方。您将了解目前存在的 web 应用类型以及 Nuxt 符合哪些类别。然后，您将在接下来的章节中了解 Nuxt 的用途。

第 2 章Nuxt入门，您将使用脚手架工具安装 Nuxt，或从头开始安装，以创建您的第一个基本 Nuxt 应用。您将了解 Nuxt 项目中的默认目录结构、配置 Nuxt 以适合您的项目以及了解资产服务。

第 3 章 AUTT1A.T.T2A.To.T3A.添加 UI 框架 Ty4 T4，在其中添加自定义的 UI 框架，如 ZURB 基金会、运动 UI、更少的 CSS 以及更多，从而使您在 Nuxt 的 UI 开发更轻松、更有趣。

第 4 章添加视图、路线和过渡，您将在 Nuxt 应用中创建导航路线、自定义页面、布局和模板。您将学习如何添加过渡和动画，创建自定义错误页面，自定义全局元标记，以及向各个页面添加特定标记。

第 5 章添加 Vue 组件是将 Vue 组件添加到 Nuxt 应用的地方。您将学习如何创建全局和本地组件并重用它们，编写基本和全局混合，以及定义符合命名约定的组件名称。

第 6 章编写插件和模块是在 Nuxt 应用中创建和添加插件、模块和模块片段的地方。您将学习如何创建 Vue 插件并将其安装到 Nuxt 项目中，编写全局函数并注册它们。

第 7 章添加了 Vue 表单，您将使用v-model和v-bind创建表单，验证表单元素，并使用修饰符进行动态值绑定。您还将学习使用 Vue 插件 VeeValidate，以简化前端验证。

第 8 章 AUTT2A.T.T2A. To.T3.添加服务器端框架 AUTT4A.，在这里，您将使用膝关节炎作为服务器端框架来创建 API 以补充您的 NUXT 应用。您将学习如何安装膝关节炎及其基本的 No.js 包，以创建一个完全工作的 API，并将其与您的 NUXT 应用集成。此外，您还将了解如何使用 NUXT 中的异步数据从膝关节炎 API 获取数据，通过异步数据访问 Nuxt 上下文，侦听查询更改、处理错误，并使用 Axios 作为 HTTP 客户端来请求 API 中的数据。

第 9 章添加服务器端数据库，您将使用 MongoDB 管理 Nuxt 应用的数据库。您将学习如何安装 MunGDB，编写基本的 MangGDB 查询，将一些虚拟数据添加到 MunGoDB 数据库中，将 MangGDB 与 API 从上一章结合到膝关节炎，然后从 NUXT 应用中获取数据。

第 10 章添加 Vuex 存储是您将使用 Vuex 管理和集中 Nuxt 应用的存储数据的地方。您将了解 Vuex 体系结构，使用存储的变异和操作方法变异存储数据，在存储程序变大时以模块化方式构建存储程序，以及在 Vuex 存储中处理表单。

第 11 章编写路由中间件和服务器中间件是在 Nuxt 应用中创建路由中间件和服务器中间件的地方。您将学习如何使用 VUE 路由创建中间件，使用 VUE CLI 创建 VUE 应用，并使用 Express .js（我们将它称为本书中的 Express），Koa 和 Connect。JS（我们将它称为本书中的 Connect）作为服务器中间件。

第 12 章创建用户登录和 API 认证是您将使用会话、cookies、JSON Web 令牌（JWTs）和 Google OAuth 向 Nuxt 应用中的受限页面添加认证的地方，以及您在上一章中了解的路由中间件。您将学习如何使用 JWTs 创建后端身份验证，在 Nuxt 应用的客户端和服务器端使用 cookie（前端身份验证），并将 Google OAuth 添加到后端和前端身份验证。

第 13 章编写端到端测试是您将使用 AVA、jsdom 和 Nightwatch.js 创建端到端测试的地方。在上一章中，您将学习如何安装这些工具、设置测试环境以及为 Nuxt 应用中的页面编写测试。

第 14 章，使用 linter、格式化器和部署命令，是您将使用 ESLint、Prettier 和 StandardJS 保持代码干净、可读和格式化的地方。您将学习如何安装和配置这些工具以满足您的需要，并在 Nuxt 应用中集成不同的 linter。最后，您将了解如何使用 Nuxt 命令部署 Nuxt 应用，并了解发布应用的托管服务。

第 15 章使用 Nuxt创建 SPA，学习如何在 Nuxt 中开发单页应用（SPA），了解 Nuxt 中 SPA 与经典 SPA 的区别，生成静态 SPA 部署到静态托管服务器，GitHub 页面。

第 16 章，为 Nuxt 创建一个与框架无关的 PHP API，是您将使用 PHP 创建一个 API 来补充 Nuxt 应用的地方。您将学习如何安装 Apache 服务器和 PHP 引擎，了解 HTTP 消息和 PHP 标准，将 MySQL 安装为数据库系统，为 MySQL 编写 CRUD 操作，通过遵守 PHP 标准创建与框架无关的 PHP API，然后将 API 与 Nuxt 应用集成。

第 17 章膝关节炎 T1，A2 T2。用 Nuxt AuthT3A.创建实时应用，在这里开发 ReNutkDB、SoCKET.IO 和 KOA 的实时 NUXT 应用。您将学习如何安装 RethinkDB，将其引入到 Reql 中，将 ReTykDB 与膝关节炎 API 一起添加，将 SOCKET.IO 添加到 API 和 NUXT 应用中，最后将 NUXT 应用转换为具有 ReTimKDB 转换程序的实时 Web 应用。

第 18 章创建带有 CMS 和 GraphQL 的 Nuxt 应用是您将使用（无头）CMS 和 GraphQL 来补充 Nuxt 应用的地方。您将学习如何将 WordPress 转换为无头 CMS，在 WordPress 中创建自定义帖子类型并扩展 WordPress REST API。您将学习如何在 Nuxt 应用中使用 GraphQL，了解 GraphQL 模式和解析器，使用 Appolo 服务器创建 GraphQL API，并使用 Keystone.js GraphQL API。此外，您还将学习如何安装和保护 PostgreSQL 和 MongoDB，从远程 API（无论是 REST API 还是 GraphQL API）生成包含 Nuxt 和流媒体资源（图像和视频）的静态站点。

充分利用这本书

在本书中，您将需要 Nuxt.js 的一个版本——如果可能的话，是最新版本。所有代码示例都已在 Ubuntu 20.10 上使用 Nuxt 2.14.x 进行了测试。以下是本书的其他基本软件、框架和技术列表：

| 本书所涵盖的软件/硬件 | 操作系统要求 | | KA.JS V2.3.0 | 任何平台 | | Axios v0.19.2 | 任何平台 | | Keystone.js v11.2.0 | 任何平台 | | Socket.IO v2.3.0 | 任何平台 | | MongoDB v4.2.6 | 任何平台 | | MySQL v10.3.22-MariaDB | 任何平台 | | 数据库 2.4.0 版 | Linux、macOS | | PHP v7.4.5 | 任何平台 | | 基金会 V5.63 | 任何平台 | | Swiper.jsv6.0.0 | 任何平台 | | Node.js v12.18.2 LTS（至少 v8.9.0） | 任何平台 | | NPM v6.14.7 | 任何平台 |

如果您使用的是本书的数字版本，我们建议您自己键入代码或通过 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/Hands-on-Nuxt.js-Web-Development 。如果代码有更新，它将在现有 GitHub 存储库中更新。

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

使用的惯例

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

CodeInText：表示文本中的码字、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 句柄。下面是一个示例：“然后，您可以在一个.css文件中创建转换样式。”

代码块设置如下：

// pages/about.vue
<script>
export default {
  transition: {
    name: 'fade'

当我们希望提请您注意代码块的特定部分时，相关行或项目以粗体显示：

[default]
exten => s,1,Dial(Zap/1|30)
exten => s,2,Voicemail(u100)
exten => s,102,Voicemail(b100)
exten => i,1,Voicemail(s0)

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

$ npm i less --save-dev
$ npm i less-loader --save-dev

粗体：表示一个新术语、一个重要单词或您在屏幕上看到的单词。例如，菜单或对话框中的单词出现在文本中，如下所示。下面是一个示例：“选择手动选择功能以从提示您选择的选项中选择路由，以选择您需要的功能。”

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://www.moonapi.com/news/12873.html