Nuxt.jsWeb开发实战 pdf下载

Nuxt.js（本书称作Nuxt）是一个基于Vue.js（本书称作Vue）的先进的Web框架，主要用于服务器端渲染（SSR）。现在，借助Nuxt和Vue，构建通用和静态生成的应用程序比以往任何时候都更加容易。

《Nuxt.js Web开发实战》详细阐述了与Nuxt.js相关的基本解决方案，主要包括Nuxt简介，开始Nuxt之旅，添加UI框架，添加视图、路由和过渡效果，添加Vue组件，编写插件和模块，添加Vue表单，添加服务器端框架，添加服务器端数据库，添加Vuex Store，编写路由中间件和服务器中间件，创建用户登录和API身份验证，编写端到端测试，Linter、格式化程序和部署命令，利用Nuxt创建一个SPA，为Nuxt创建一个框架无关的PHP API，利用Nuxt创建一个实时应用程序，利用CMS和GraphQL创建Nuxt应用程序等内容。此外，本书还提供了相应的示例、代码，以帮助读者进一步理解相关方案的实现过程。

郭隆添是一位跨学科的全栈web开发人员/设计师和分析师。他出生在马来西亚槟城。他在马来西亚沙捞越大学获得应用艺术学士学位(1996 - 1999年)，在英国普利茅斯大学数字艺术与技术学院获得数字未来硕士学位(2002 - 2003年)。

前 言

Nuxt.js（本书称作Nuxt）是一个基于Vue.js（本书称作Vue）的先进的Web框架，主要用于服务器端渲染（SSR）。现在，借助Nuxt和Vue，构建通用和静态生成的应用程序比以往任何时候都更加容易。本书将帮助读者学习和运行Nuxt的基础内容，以及如何将其与Vue的最新版本集成，使读者能够使用Nuxt和Vue.js构建整个项目，包括身份验证、测试和部署，并考查Nuxt的目录结构，通过Nuxt的页面、视图、路由机制和Vue组件，以及编写插件、模块、Vuex存储和中间件创建Nuxt项目。此外，我们还将通过Koa.js（在本书中称作Koa）、PHP标准推荐（PSR）、MongoDB和MySQL，以及将WordPress用作一个无头CMS和REST API，进而介绍如何创建Node.js和PHP API。另外，我们还将Keystone.js用作GraphQL API以进一步完善Nuxt。接下来，我们将介绍如何利用Socket.IO和RethinkDB创建实时Nuxt应用程序和API，最终从远程API（无论是REST API还是GraphQL API）生成包含Nuxt和资源流（图像和视频）的静态站点。

适用读者

本书主要面向JavaScript或全站开发人员而编写，他们希望构建服务器端渲染的Vue.js应用程序。因此，熟悉Vue.js框架将有助于理解本书中涉及的核心概念。

本书内容

第1章介绍Nuxt的主要特性。另外，本章还介绍当前Web应用程序的类型以及Nuxt符合哪些类别。在后续章节中，我们依次考查Nuxt的各种用途。

第2章介绍如何通过构建工具或通过手动方式安装Nuxt，进而创建第1个Nuxt应用程序。此外，本章还介绍Nuxt项目中默认的目录结构、配置Nuxt以满足项目需求，并理解数据资源服务机制。

第3章探讨如何添加自定义UI框架，如Zurb Foundation、Motion UI、Less CSS等，以简化Nuxt中的UI开发并体验开发过程中的各种乐趣。

第4章在Nuxt应用程序中创建导航路由、自定义页面、布局和模板。另外，本章还介绍如何添加转化和动画、创建自定义错误页面、自定义全局元标签，以及向独立页面中添加特定的标签。

第5章向Nuxt应用程序中添加Vue组件。我们编写基本的全局混入并定义遵循命名规则的组件名称，进而介绍如何创建全局和本地组件并复用这些组件。

第6章在Nuxt应用程序中创建并添加插件、模块和模块片段。此外，本章还介绍如何创建Vue插件并在Nuxt项目中安装这些插件、编写全局函数并注册这些函数。

第7章通过v-model和v-bind创建表单，并使用修饰符验证表单元素并进行动态值绑定。另外，我们还介绍如何使用Vue插件VeeValidate以简化前端验证操作。

第8章把Koa用作服务器端框架，进而创建一个API以进一步完善Nuxt应用程序。另外，本章还考查如何安装Koa及其Node.js包，以创建一个可完整工作的API并将其与Nuxt应用程序进行集成。除此之外，我们还介绍Nuxt中的异步数据，并通过异步数据访问Nuxt上下文、监听查询变化、处理错误、将Axios用作HTTP客户端（请求API中的数据）以从Koa API中获取数据。

第9章使用MongoDB管理Nuxt应用程序中的数据库。其间，我们介绍如何安装MongoDB、编写基本的MongoDB查询、向MongoDB数据库中添加虚拟数据、利用Koa将MongoDB与第8章中的API进行集成，并随后从Nuxt应用程序中获取数据。

第10章针对Nuxt应用程序使用Vuex管理和中心化存储数据。在本章，我们了解Vuex架构、利用存储的突变（mutation）和操作方法更改存储数据、在存储程序复杂化时采用模块化方式构建存储程序，以及在Vuex存储中处理表单。

第11章在Nuxt应用程序中创建路由中间件和服务器中间件。我们介绍如何利用Vue Router创建中间件，通过Vue CLI将Express.js（本书称作Express）、Koa、Connect.js（本书称作Connect）用作服务器中间件以创建Vue应用程序。

第12章利用会话、JSON Web令牌（token）、Google OAuth和第11章介绍的路由中间件向Nuxt应用程序的限制页面中添加身份验证。在本章，我们介绍如何利用在Nuxt应用程序的客户端和服务器端上的Cookie（前端身份验证），并向后端和前端身份验证中加入Google OAuth，进而创建基于JWT的后端身份验证机制。

第13章通过AVA、jsdom和Nightwatch.js创建端到端的测试。在本章，我们介绍安装这些工具、设置测试环境并针对第12章的Nuxt应用程序中的页面编写测试程序。

第14章使用ESLint、Prettier和StandardJS，以使代码更加整洁且兼具可读性和格式化特性。在本章，我们介绍如何安装和配置这些工具以满足相关需求，并在Nuxt应用程序中集成不同的Linter。最后，本章还介绍如何利用Nuxt命令部署Nuxt应用程序，以及发布应用程序的托管服务。

第15章介绍如何在Nuxt中开发单页应用程序（SPA），并介绍Nuxt中的SPA与经典SPA之间的不同之处，进而生成静态SPA并发布至静态托管服务器（GitHub Pages）上。

第16章使用PHP创建一个API以进一步完善Nuxt应用程序。其间，我们介绍如何安装Apache服务器和PHP引擎、了解HTTP消息和PHP标准、安装MySQL作为数据库系统、针对MySQL编写CRUD操作、通过遵循PHP标准创建与框架无关的PHP API，并随后将API与Nuxt应用程序进行集成。

第17章利用RethinkDB、Socket.IO和Koa开发一个实时Nuxt应用程序。在本章，我们介绍如何安装RethinkDB、考查ReQL方面的知识、将RethinkDB与Koa API进行集成、将Socket.IO添加至API和Nuxt应用程序中，最后利用RethinkDB Change Feed将Nuxt应用程序转换为一个实时Web应用程序。

第18章使用（无头）CMS和GraphQL以完善Nuxt应用程序。在本章，我们介绍如何将WordPress转换为无头CMS、创建WordPress中的自定义POST类型，并扩展WordPress REST API。接下来，我们介绍如何在Nuxt应用程序中使用GraphQL、理解GraphQL模式和解析器、使用Appolo Server创建GraphQL API，以及如何使用Keystone.js GraphQL API。除此之外，本章还讨论如何安装安全的PostgreSQL和MongoDB、从远程API（无论是REST API还是GraphQL API）使用Nuxt和流资源（图像和视频）生成静态站点。

技术需求

本书需要使用最新版本的Nuxt.js。本书中的全部代码均在Ubuntu 20.10上通过Nuxt 2.14.x进行测试。下表列出了本书所需的软件、框架和技术列表。

本书所需的软件和硬件 操作系统环境

Koa.js v2.13.0 任意平台

Axios v0.19.2 任意平台

Keystone.js v11.2.0 任意平台

Socket.IO v2.3.0 任意平台

MongoDB v4.2.6 任意平台

MySQL v10.3.22-MariaDB 任意平台

RethinkDB v2.4.0 任意平台

续表

本书所需的软件和硬件 操作系统环境

PHP v7.4.5 任意平台

Foundation v6.6.3 任意平台

Swiper.js v6.0.0 任意平台

Node.js v12.18.2 LTS（至少为v8.9.0） 任意平台

NPM v6.14.7 任意平台

下载示例代码文件

读者可访问www.packt.com并通过个人账户下载本书的示例代码文件。无论读者在何处购买了本书，均可访问www.packt.com/support，经注册后我们会将相关文件直接通过电子邮件的方式发送给您。

下载代码文件的具体操作步骤如下。

（1）访问www.packt.com并注册。

（2）选择SUPPORT选项卡。

（3）单击Code Downloads & Errata。

（4）在Search搜索框中输入书名。

当文件下载完毕后，可利用下列软件的最新版本解压或析取文件夹中的内容。

? WinRAR/7-Zip（Windows环境）。

? Zipeg/iZip/UnRarX（Mac环境）。

? 7-Zip/PeaZip（Linux环境）。

另外，本书的代码包也托管于GitHub上，对应网址为https://github.com/PacktPublishing/ Hands-on-Nuxt.js-Web-Development。若代码被更新，现有的GitHub库也会保持同步更新。

读者还可访问https://github.com/PacktPublishing/并从对应分类中查看其他代码包和视频内容。

本书约定

代码块则通过下列方式进行设置。

// pages/about.vue