前言
Nuxt.js
(在本书中我们将其称为 Nuxt
)是一个基于 Vue.js
(在本书中我们将其称为 Vue
)构建的渐进式 Web
框架,用于服务器端渲染(SSR
)。借助 Nuxt
和 Vue
,构建通用和静态生成的应用程序比以往任何时候都更加容易。本书将帮助你快速上手 Nuxt
的基础知识,以及如何将其与最新版本的 Vue
集成,使你能够使用 Nuxt
和 Vue.js
构建包含身份验证、测试和部署的完整项目。你将探索 Nuxt
的目录结构,并通过使用 Nuxt
的页面、视图、路由和 Vue
组件,以及编写插件、模块、Vuex store
和中间件来创建你的 Nuxt
项目。此外,你将学习如何使用 Koa.js
(在本书中我们将其称为 Koa
)、PHP
标准建议(PSRs
)、MongoDB
和 MySQL
从头开始创建 Node.js
和 PHP API
或数据平台,以及如何使用 WordPress
作为无头 CMS
和 REST API
。你还将使用 Keystone.js
作为 GraphQL API
来补充 Nuxt
。你将学习如何使用 Socket.IO
和 RethinkDB
创建一个实时的 Nuxt
应用程序和 API
,最后,你将学习如何使用 Nuxt
生成静态站点,并从远程 API
(无论是 REST API
还是 GraphQL API
)流式传输资源(图像和视频)。
本书涵盖的内容
第一章,Nuxt
简介:在本章中,你将了解 Nuxt
的主要特性。你将学习当今存在的各种类型的 Web
应用程序,以及 Nuxt
属于哪个类别。然后,你将了解在接下来的章节中可以使用 Nuxt
来做什么。
第二章,Nuxt
入门:在本章中,你将学习如何使用脚手架工具或从头开始安装 Nuxt
,以创建你的第一个基本的 Nuxt
应用程序。你将了解 Nuxt
项目中的默认目录结构,配置 Nuxt
以适应你的项目,并理解静态资源服务。
第三章,添加 UI
框架:在本章中,你将添加自定义 UI
框架,例如 Zurb Foundation
、Motion UI
、Less CSS
等等,以使你在 Nuxt
中的 UI
开发更轻松、更有趣。
第四章,添加视图、路由和过渡效果:在本章中,你将在 Nuxt
应用程序中创建导航路由、自定义页面、布局和模板。你将学习如何添加过渡和动画效果,创建自定义错误页面,自定义全局 meta
标签,并为单个页面添加特定的标签。
第五章,添加 Vue
组件:在本章中,你将向 Nuxt
应用程序添加 Vue
组件。你将学习如何创建和重用全局和局部组件,编写基础和全局混入,以及定义符合命名约定的组件名称。
第六章,编写插件和模块:在本章中,你将在 Nuxt
应用程序中创建和添加插件、模块和模块代码片段。你将学习如何创建 Vue
插件并在 Nuxt
项目中安装它们,编写全局函数并注册它们。
第七章,添加 Vue
表单:在本章中,你将使用 v-model
和 v-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
的架构,使用 store
的 mutation
和 action
方法修改 store
数据,在 store
变得更大时以模块化的方式组织你的 store
程序,以及在 Vuex store
中处理表单。
第十一章,编写路由中间件和服务端中间件:在本章中,你将在你的 Nuxt
应用程序中创建路由中间件和服务端中间件。你将学习如何使用 Vue Router
创建中间件,使用 Vue CLI
创建 Vue
应用程序,以及使用 Express.js
(在本书中我们将其称为 Express
)、Koa
和 Connect.js
(在本书中我们将其称为 Connect
)作为服务端中间件。
第十二章,创建用户登录和 API
认证:在本章中,你将使用会话、Cookie
、JSON
Web
令牌 (JWT
)、Google OAuth
以及你在上一章学到的路由中间件,为你的 Nuxt
应用程序中的受限页面添加身份验证。你将学习如何使用 JWT
创建后端身份验证,在你的 Nuxt
应用程序(前端身份验证)的客户端和服务器端使用 Cookie
,以及为后端和前端身份验证添加 Google OAuth
。
第十三章,编写端到端测试:在本章中,你将使用 AVA
、jsdom
和 Nightwatch.js
创建端到端测试。你将学习如何安装这些工具,设置测试环境,并为你在前一章中创建的 Nuxt
应用程序的页面编写测试。
第十四章,使用代码检查器、格式化工具和部署命令:在本章中,你将使用 ESLint
、Prettier
和 StandardJS
来保持你的代码干净、可读且格式化良好。你将学习如何安装和配置这些工具以满足你的需求,并在你的 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
创建一个实时应用:在本章中,你将使用 RethinkDB
、Socket.IO
和 Koa
开发一个实时的 Nuxt
应用程序。你将学习如何安装 RethinkDB
,了解 ReQL
,将 RethinkDB
与你的 Koa API
集成,将 Socket.IO
添加到 API
和你的 Nuxt
应用程序中,最后使用 RethinkDB changefeeds
将你的 Nuxt
应用程序变成一个实时的 Web
应用程序。
第十八章,使用 CMS
和 GraphQL
创建 Nuxt
应用:在本章中,你将使用(无头)CMS
和 GraphQL
来补充你的 Nuxt
应用程序。你将学习如何将 WordPress
变成一个无头 CMS
,在 WordPress
中创建自定义文章类型并扩展 WordPress REST API
。你将学习如何在你的 Nuxt
应用程序中使用 GraphQL
,理解 GraphQL schema
和 resolvers
,使用 Apollo Server
创建 GraphQL API
,并使用 Keystone.js GraphQL API
。此外,你还将学习如何安装和保护 PostgreSQL
和 MongoDB
,使用 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 |