前言

Nuxt.js(在本书中我们将其称为 Nuxt)是一个基于 Vue.js(在本书中我们将其称为 Vue)构建的渐进式 Web 框架,用于服务器端渲染(SSR)。借助 NuxtVue,构建通用和静态生成的应用程序比以往任何时候都更加容易。本书将帮助你快速上手 Nuxt 的基础知识,以及如何将其与最新版本的 Vue 集成,使你能够使用 NuxtVue.js 构建包含身份验证、测试和部署的完整项目。你将探索 Nuxt 的目录结构,并通过使用 Nuxt 的页面、视图、路由和 Vue 组件,以及编写插件、模块、Vuex store 和中间件来创建你的 Nuxt 项目。此外,你将学习如何使用 Koa.js(在本书中我们将其称为 Koa)、PHP 标准建议(PSRs)、MongoDBMySQL 从头开始创建 Node.jsPHP API 或数据平台,以及如何使用 WordPress 作为无头 CMSREST API。你还将使用 Keystone.js 作为 GraphQL API 来补充 Nuxt。你将学习如何使用 Socket.IORethinkDB 创建一个实时的 Nuxt 应用程序和 API,最后,你将学习如何使用 Nuxt 生成静态站点,并从远程 API(无论是 REST API 还是 GraphQL API)流式传输资源(图像和视频)。

本书适合读者

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

本书涵盖的内容

第一章,Nuxt 简介:在本章中,你将了解 Nuxt 的主要特性。你将学习当今存在的各种类型的 Web 应用程序,以及 Nuxt 属于哪个类别。然后,你将了解在接下来的章节中可以使用 Nuxt 来做什么。

第二章,Nuxt 入门:在本章中,你将学习如何使用脚手架工具或从头开始安装 Nuxt,以创建你的第一个基本的 Nuxt 应用程序。你将了解 Nuxt 项目中的默认目录结构,配置 Nuxt 以适应你的项目,并理解静态资源服务。

第三章,添加 UI 框架:在本章中,你将添加自定义 UI 框架,例如 Zurb FoundationMotion UILess CSS 等等,以使你在 Nuxt 中的 UI 开发更轻松、更有趣。

第四章,添加视图、路由和过渡效果:在本章中,你将在 Nuxt 应用程序中创建导航路由、自定义页面、布局和模板。你将学习如何添加过渡和动画效果,创建自定义错误页面,自定义全局 meta 标签,并为单个页面添加特定的标签。

第五章,添加 Vue 组件:在本章中,你将向 Nuxt 应用程序添加 Vue 组件。你将学习如何创建和重用全局和局部组件,编写基础和全局混入,以及定义符合命名约定的组件名称。

第六章,编写插件和模块:在本章中,你将在 Nuxt 应用程序中创建和添加插件、模块和模块代码片段。你将学习如何创建 Vue 插件并在 Nuxt 项目中安装它们,编写全局函数并注册它们。

第七章,添加 Vue 表单:在本章中,你将使用 v-modelv-bind 创建表单,验证表单元素,并通过使用修饰符进行动态值绑定。你还将学习使用 Vue 插件 VeeValidate 来简化前端验证。

第八章,添加服务端框架:在本章中,你将使用 Koa 作为服务端框架来创建一个 API,以补充你的 Nuxt 应用程序。你将学习如何安装 Koa 及其必要的 Node.js 包来创建一个功能完善的 API,并将其与你的 Nuxt 应用程序集成。此外,你还将学习如何在 Nuxt 中使用异步数据从 Koa API 获取数据,通过异步数据访问 Nuxt 上下文,监听查询更改,处理错误,以及使用 Axios 作为 HTTP 客户端从 API 请求数据。

第九章,添加服务端数据库:在本章中,你将使用 MongoDB 来管理你的 Nuxt 应用程序的数据库。你将学习如何安装 MongoDB,编写基本的 MongoDB 查询,向 MongoDB 数据库添加一些虚拟数据,将 MongoDB 与前一章中使用 Koa 构建的 API 集成,然后从你的 Nuxt 应用程序中获取数据。

第十章,添加 Vuex Store:在本章中,你将使用 Vuex 来管理和集中你的 Nuxt 应用程序的 store 数据。你将了解 Vuex 的架构,使用 storemutationaction 方法修改 store 数据,在 store 变得更大时以模块化的方式组织你的 store 程序,以及在 Vuex store 中处理表单。

第十一章,编写路由中间件和服务端中间件:在本章中,你将在你的 Nuxt 应用程序中创建路由中间件和服务端中间件。你将学习如何使用 Vue Router 创建中间件,使用 Vue CLI 创建 Vue 应用程序,以及使用 Express.js(在本书中我们将其称为 Express)、KoaConnect.js(在本书中我们将其称为 Connect)作为服务端中间件。

第十二章,创建用户登录和 API 认证:在本章中,你将使用会话、CookieJSON Web 令牌 (JWT)、Google OAuth 以及你在上一章学到的路由中间件,为你的 Nuxt 应用程序中的受限页面添加身份验证。你将学习如何使用 JWT 创建后端身份验证,在你的 Nuxt 应用程序(前端身份验证)的客户端和服务器端使用 Cookie,以及为后端和前端身份验证添加 Google OAuth

第十三章,编写端到端测试:在本章中,你将使用 AVAjsdomNightwatch.js 创建端到端测试。你将学习如何安装这些工具,设置测试环境,并为你在前一章中创建的 Nuxt 应用程序的页面编写测试。

第十四章,使用代码检查器、格式化工具和部署命令:在本章中,你将使用 ESLintPrettierStandardJS 来保持你的代码干净、可读且格式化良好。你将学习如何安装和配置这些工具以满足你的需求,并在你的 Nuxt 应用程序中集成不同的代码检查器。最后,你将学习如何使用 Nuxt 命令部署你的 Nuxt 应用程序,并了解使用哪种托管服务来发布你的应用程序。

第十五章,使用 Nuxt 创建 SPA:在本章中,你将学习如何在 Nuxt 中开发单页应用程序 (SPA),理解 Nuxt 中的 SPA 与经典 SPA 之间的区别,并生成一个静态 SPA 以部署到静态托管服务器 GitHub Pages

第十六章,为 Nuxt 创建一个框架无关的 PHP API:在本章中,你将使用 PHP 创建一个 API 来补充你的 Nuxt 应用程序。你将学习如何安装 Apache 服务器和 PHP 引擎,理解 HTTP 消息和 PHP 标准,安装 MySQL 作为你的数据库系统,为 MySQL 编写 CRUD 操作,通过遵守 PHP 标准创建一个框架无关的 PHP API,然后将你的 API 与你的 Nuxt 应用程序集成。

第十七章,使用 Nuxt 创建一个实时应用:在本章中,你将使用 RethinkDBSocket.IOKoa 开发一个实时的 Nuxt 应用程序。你将学习如何安装 RethinkDB,了解 ReQL,将 RethinkDB 与你的 Koa API 集成,将 Socket.IO 添加到 API 和你的 Nuxt 应用程序中,最后使用 RethinkDB changefeeds 将你的 Nuxt 应用程序变成一个实时的 Web 应用程序。

第十八章,使用 CMSGraphQL 创建 Nuxt 应用:在本章中,你将使用(无头)CMSGraphQL 来补充你的 Nuxt 应用程序。你将学习如何将 WordPress 变成一个无头 CMS,在 WordPress 中创建自定义文章类型并扩展 WordPress REST API。你将学习如何在你的 Nuxt 应用程序中使用 GraphQL,理解 GraphQL schemaresolvers,使用 Apollo Server 创建 GraphQL API,并使用 Keystone.js GraphQL API。此外,你还将学习如何安装和保护 PostgreSQLMongoDB,使用 Nuxt 生成静态站点,并从远程 API(无论是 REST API 还是 GraphQL API)流式传输资源(图像和视频)。

技术版本

软件 运行平台

Koa.js v2.13.0

Any platform

Axios v0.19.2

Any platform

Keystone.js v11.2.0

Any platform

Socket.IO v2.3.0

Any platform

MongoDB v4.2.6

Any platform

MySQL v10.3.22-MariaDB

Any platform

RethinkDB v2.4.0

Linux, macOS

PHP v7.4.5

Any platform

Foundation v6.6.3

Any platform

Swiper.js v6.0.0

Any platform,

Node.js v12.18.2 LTS (at least v8.9.0)

Any platform

NPM v6.14.7

Any platform