2024三掌柜赠书活动第十二期：Nuxt.js Web开发实战
本书将帮助读者学习和运行Nuxt的基础内容，以及如何将其与Vue的版本集成，使读者能够使用Nuxt和Vue.js构建整个项目，包括身份验证、测试和部署，并考查Nuxt的目录结构，通过Nuxt的页面、视图、路由机制和Vue组件，以及编写插件、模块、Vuex存储和中间件创建Nuxt项目。此外，我们还将通过Koa.js（在本书中称作Koa）、PHP标准推荐（PSR）、MongoDB和MySQL，以及将W
文章共8,772字 · 阅读需要大约30分钟
目录
前言
作为前端开发的小伙伴想必对Nuxt.js并不陌生，Nuxt.js是基于Vue.js的一款用于构建服务端渲染的应用程序的框架。它能够帮助开发者快速搭建高性能的单页面应用（SPA）和多页面应用（MPA）。Nuxt.js在构建应用程序的过程中，提供了很多好用的功能和工具，使得Web开发变得更加高效和简单。那么本文就来简单聊聊关于Nuxt.js的那些事。
Nuxt.js的特性
简单总结一下Nuxt.js的特性，根据官方显示，Nuxt.js具有以下特性：
- 服务端渲染（SSR）：Nuxt.js的核心特性是服务端渲染，这意味着页面的初始渲染发生在服务器端，可以提供更好的搜索引擎优化（SEO）和首屏加载速度。
- 自动化路由配置：Nuxt.js会根据页面的目录结构自动生成路由配置，大大减少了手动配置路由的工作量。
- 统一的目录结构：Nuxt.js提供了一套统一的目录结构，使得代码组织更加清晰和易于维护。
- 强大的插件系统：Nuxt.js提供了丰富的插件系统，可以轻松地集成第三方库和模块，扩展应用程序的功能。
- 支持各种数据源：Nuxt.js可以从各种数据源获取数据，包括API接口、静态文件、数据库等。
- 浏览器端代码自动注入：Nuxt.js会自动将组件和插件的代码注入到浏览器端，无需手动编写代码。
- 丰富的开发工具：Nuxt.js提供了很多开发工具，如代码热加载、错误提示等，可以帮助开发者更高效地进行开发和调试。
Nuxt.js的实战应用
1、创建一个Nuxt.js项目：首先，我们需要使用命令行工具创建一个新的Nuxt.js项目。在命令行中执行以下命令：
npx create-nuxt-app my-app
然后，按照提示进行配置，选择需要的功能和模块。完成配置后，进入项目目录，执行以下命令启动开发服务器：
npm run dev
2、添加页面和路由：在Nuxt.js中，页面的目录结构会自动生成对应的路由配置。我们可以在
pages目录下创建Vue组件作为页面，然后Nuxt.js会自动将它们作为路由配置。例如，我们在pages目录下创建一个index.vue文件，然后在浏览器中访问http://localhost:3000/即可看到该页面。
3、使用布局和组件：Nuxt.js提供了一套布局系统，可以帮助我们管理页面布局。我们可以在
layouts目录下创建布局组件，并在页面组件中使用标签来使用布局。此外，我们还可以创建可复用的组件，并在页面组件中引入和使用它们。
4、数据获取和渲染：Nuxt.js提供了
asyncData方法，可以在组件中预先获取数据并将其注入到页面中。我们可以在组件中实现asyncData方法，然后在页面渲染之前获取数据。此外，Nuxt.js还支持在nuxtServerInit方法中获取数据，并将其注入到所有页面中。
5、部署和优化：当开发完成后，我们可以使用
nuxt generate命令将Nuxt.js应用程序生成静态文件，然后部署到任何支持静态文件服务的主机上。另外，Nuxt.js还提供了一些优化和部署技巧，如使用CDN加速、压缩代码等，可以提高应用程序的性能和加载速度。
关于《Nuxt.js Web开发实战》
接下来给大家推荐一本关于入门Nuxt.js开发的书籍，这是一本想要入门Nuxt.js开发的开发者离不开的干货图书，一经上市就登上了当当“计算机与互联网”图书排行榜前列。本书从Nuxt.js技术概念到技术实践，助你在Nuxt.js开发领域取得成功！另外，关注本文博主，点赞+收藏本文，且在本文评论区评论“我要入门Nuxt.js开发”，将选取三名幸运读者送出纸质版《Nuxt.js Web开发实战》一本，截止时间：2024.03.10。入手《Nuxt.js Web开发实战》传送门：《Nuxt.js Web开发实战》([马来西亚] 郭隆添 著 张骞 译)【简介_书评_在线阅读】 - 当当图书或者https://item.jd.com/13663139.html，个人觉得这本书非常的不错，是一本不可多得的好书，值得拥有去学习。
编辑推荐
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年)。
图书目录
第1部分 第1个Nuxt应用程序
第1章 Nuxt简介 3
1.1 从Vue到Nuxt 3
1.2 为何使用Nuxt 4
1.2.1 编写单文件组件 4
1.2.2 编写ES2015 6
1.2.3 利用预处理器编写CSS 6
1.2.4 利用模块和插件扩展Nuxt 7
1.2.5 在路由之间添加过渡 8
1.2.6 管理元素 9
1.2.7 利用webpack打包和划分代码 9
1.3 应用程序的类型 11
1.3.1 传统的服务器端渲染的应用程序 11
1.3.2 传统的单页应用程序（SPA） 12
1.3.3 通用服务器端渲染的应用程序（SSR） 14
1.3.4 静态生成的应用程序 15
1.4 作为通用SSR应用程序的Nuxt 16
1.5 作为静态站点生成器的Nuxt 17
1.6 作为单页应用程序的Nuxt 17
1.7 本章小结 18
第2章 开始Nuxt之旅 19
2.1 技术需求 19
2.2 安装Nuxt 20
2.2.1 使用create-nuxt-app 20
2.2.2 从头开始安装 22
2.3 了解目录结构 22
2.3.1 /assets/目录 23
2.3.2 /static/目录 24
2.3.3 /pages/目录 24
2.3.4 /layouts/目录 24
2.3.5 /components/目录 24
2.3.6 /plugins/目录 25
2.3.7 /store/目录 26
2.3.8 /middleware/目录 26
2.3.9 package.json文件 26
2.3.10 nuxt.config.js文件 27
2.3.11 别名 27
2.4 了解自定义配置 28
2.4.1 mode选项 29
2.4.2 target选项 29
2.4.3 head选项 29
2.4.4 css选项 30
2.4.5 plugins选项 31
2.4.6 components选项 31
2.4.7 buildModules选项 31
2.4.8 modules选项 31
2.4.9 build选项 32
2.4.10 dev选项 33
2.4.11 rootDir选项 34
2.4.12 srcDir选项 34
2.4.13 server选项 35
2.4.14 env选项 36
2.4.15 router选项 37
2.4.16 dir选项 38
2.4.17 loading选项 39
2.4.18 pageTransition和layoutTransition选项 39
2.4.19 generate选项 40
2.5 了解数据资源服务机制 41
2.6 本章小结 44
第3章 添加UI框架 45
3.1 添加Foundation和Motion UI 45
3.1.1 利用Foundation创建网格布局和站点导航 47
3.1.2 使用Foundation中的JavaScript实用程序和插件 49
3.1.3 利用Motion UI创建CSS动画和过渡 52
3.1.4 利用Foundation Icon Fonts 3添加图标 55
3.2 添加Less（Leaner Style Sheets） 56
3.3 添加jQuery UI 59
3.4 添加AOS 62
3.5 添加Swiper 64
3.6 本章小结 67
第2部分 视图、路由、组件、插件和模块
第4章 添加视图、路由和过渡效果 71
4.1 创建自定义路由 71
4.1.1 Vue Router 71
4.1.2 安装Vue Router 72
4.1.3 利用Vue Router创建路由 72
4.1.4 创建基本的路由 74
4.1.5 创建动态路由 75
4.1.6 创建嵌套路由 76
4.1.7 创建动态嵌套路由 82
4.1.8 验证路由参数 84
4.1.9 利用_.vue文件处理未知的路由 85
4.2 创建自定义视图 87
4.2.1 理解Nuxt视图 87
4.2.2 自定义应用程序模板 88
4.2.3 创建自定义HTML头 89
4.2.4 创建自定义布局 94
4.2.5 创建自定义页面 97
4.2.6 理解页面 97
4.3 创建自定义转换 106
4.3.1 理解Vue中的转换 106
4.3.2 利用pageTransition实现转换 108
4.3.3 利用layoutTransition属性实现转换 111
4.3.4 利用CSS动画实现转换 113
4.3.5 利用JavaScript钩子实现转换 114
4.3.6 理解转换模式 119
4.4 本章小结 120
第5章 添加Vue组件 121
5.1 了解Vue组件 121
5.1.1 什么是组件 123
5.1.2 利用props向子组件传递数据 123
5.1.3 监听子组件事件 126
5.1.4 利用v-mode创建自定义输入组件 128
5.1.5 v-for循环中的key属性 131
5.1.6 利用key属性控制可复用的元素 135
5.2 创建单文件Vue组件 136
5.2.1 利用webpack编译单文件组件 137
5.2.2 在单文件组件中传递数据和监听事件 139
5.2.3 在Nuxt中添加Vue组件 143
5.3 注册全局和本地组件 147
5.3.1 在Vue中注册全局组件 147
5.3.2 在Vue/Nuxt中注册本地组件 148
5.3.3 在Nuxt中注册全局组件 150
5.4 编写基本和全局混入 152
5.4.1 创建基本的混入/非全局混入 153
5.4.2 创建全局混入 155
5.5 定义组件名并使用命名规则 156
5.5.1 多个单词构成的组件名称 156
5.5.2 组件数据 157
5.5.3 props定义 158
5.5.4 组件文件 158
5.5.5 单文件组件文件名大小写 159
5.5.6 自闭合组件 159
5.6 本章小结 160
第6章 编写插件和模块 161
6.1 编写Vue插件 161
6.1.1 在Vue中编写自定义插件 162
6.1.2 将Vue插件导入Nuxt中 165
6.1.3 在缺少SSR支持的情况下导入外部Vue插件 166
6.2 在Nuxt中编写全局函数 167
6.2.1 将函数注入Vue实例中 168
6.2.2 将函数注入Nuxt上下文中 169
6.2.3 将函数注入Vue实例和Nuxt上下文中 170
6.2.4 仅注入客户端或服务器端插件 172
6.3 编写Nuxt模块 174
6.4 编写异步Nuxt模块 180
6.4.1 使用async/await 180
6.4.2 返回一个Promise 181
6.5 编写Nuxt模块片段 182
6.5.1 使用选项 182
6.5.2 使用addPlugin辅助方法 184
6.5.3 使用Lodash模板 185
6.5.4 添加CSS库 187
6.5.5 注册自定义webpack加载器 189
6.5.6 注册自定义webpack插件 192
6.5.7 在特定的钩子上创建任务 193
6.6 本章小结 195
第7章 添加Vue表单 197
7.1 理解v-model 197
7.1.1 在文本和文本框中使用v-model 197
7.1.2 在复选框和单选按钮元素中使用v-model 199
7.1.3 在select元素中使用v-model 200
7.2 利用基本的数据绑定机制验证表单 201
7.2.1 验证文本元素 202
7.2.2 验证textarea元素 203
7.2.3 验证复选框元素 204
7.2.4 验证单元按钮元素 205
7.2.5 验证select元素 206
7.3 生成动态值绑定 208
7.3.1 替换布尔值—checkbox元素 209
7.3.2 利用动态属性替换字符串—radio属性 209
7.3.3 利用对象替换字符串 210
7.4 使用修饰符 211
7.4.1 添加.lazy 211
7.4.2 添加.number 211
7.4.3 添加.trim 212
7.5 利用VeeValidate验证表单 212
7.6 在Nuxt应用程序中使用自定义验证 215
7.7 本章小结 219
第3部分 服务器开发和数据管理
第8章 添加服务器端框架 223
8.1 引入Backpack 223
8.1.1 安装和配置Backpack 223
8.1.2 利用Backpack创建一个简单的应用程序 224
8.2 引入Koa 226
8.2.1 安装和配置Koa 226
8.2.2 ctx的含义 227
8.2.3 了解Koa级联机制的工作方式 227
8.3 将Koa与Nuxt进行集成 231
8.4 理解异步数据 236
8.4.1 返回一个Promise 237
8.4.2 使用async/await 237
8.4.3 合并数据 238
8.5 访问asyncData中的上下文 238
8.5.1 访问req/res对象 239
8.5.2 访问动态路由数据 239
8.5.3 监听查询数据 240
8.5.4 处理错误 241
8.6 利用Axios获取异步数据 242
8.6.1 安装和配置Axios 242
8.6.2 利用Axios和asyncData获取数据 243
8.6.3 监听查询变化 245
8.7 本章小结 246
第9章 添加服务器端数据库 247
9.1 引入MongoDB 247
9.1.1 安装MongoDB 248
9.1.2 在Ubuntu 20.04上安装MongoDB 248
9.1.3 启动MongoDB 249
9.2 编写基本的MongoDB查询 250
9.2.1 创建一个数据库 250
9.2.2 创建一个新的集合 251
9.3 编写MongoDB CRUD操作 252
9.4 利用MongoDB CRUD注入数据 253
9.4.1 插入文档 253
9.4.2 查询文档 254
9.4.3 更新文档 256
9.4.4 删除文档 258
9.5 将MongoDB与Koa进行集成 259
9.5.1 安装MongoDB驱动程序 259
9.5.2 利用MongoDB驱动程序创建简单的应用程序 259
9.5.3 配置MongoDB驱动程序 261
9.5.4 理解ObjectId和ObjectId方法 262
9.5.5 注入一个文档 263
9.5.6 获取所有文档 265
9.5.7 更新一个文档 266
9.5.8 删除一个文档 267
9.6 将MongoDB与Nuxt页面进行集成 268
9.6.1 创建一个页面用于添加新用户 269
9.6.2 创建更新页面用于更新已有用户 269
9.6.3 创建删除页面用于删除已有用户 270
9.7 本章小结 272
第10章 添加Vuex Store 273
10.1 理解Vuex架构 273
10.1.1 Vuex的含义 273
10.1.2 状态管理模式 273
10.2 开始使用Vuex 275
10.2.1 安装Vuex 275
10.2.2 创建一个简单的存储 276
10.3 理解Vuex核心概念 277
10.3.1 状态 277
10.3.2 getter 280
10.3.3 突变 283
10.3.4 动作 285
10.3.5 模块 287
10.4 构建Vuex存储模块 293
10.4.1 创建简单的存储模块结构 293
10.4.2 创建高级的存储模块结构 295
10.5 处理Vuex存储中的表单 297
10.5.1 使用v-bind和v-on指令 298
10.5.2 使用双向computed属性 299
10.6 在Nuxt中使用Vuex存储 300
10.6.1 使用模块模式 300
10.6.2 使用模块文件 304
10.6.3 使用fetch方法 306
10.6.4 使用nuxtServerInit动作 308
10.7 本章小结 312
第4部分 中间件和安全
第11章 编写路由中间件和服务器中间件 315
11.1 利用Vue Router编写中间件 315
11.1.1 中间件的具体含义 315
11.1.2 安装Vue Router 316
11.1.3 使用导航保护 317
11.1.4 导航保护中的参数（to、from和next） 323
11.2 Vue CLI简介 326
11.2.1 安装Vue CLI 326
11.2.2 Vue CLI的项目结构 327
11.2.3 利用Vue CLI编写中间件和Vuex存储 329
11.3 在Nuxt中编写路由中间件 334
11.3.1 编写全局中间件 335
11.3.2 编写逐个路由中间件 338
11.4 编写Nuxt服务器中间件 341
11.4.1 将Express用作Nuxt的服务器中间件 342
11.4.2 将Koa用作Nuxt的服务器中间件 346
11.4.3 创建自定义服务器中间件 349
11.5 本章小结 350
第12章 创建用户登录和API身份验证 351
12.1 理解基于会话的身份验证 351
12.1.1 会话和cookie的含义 352
12.1.2 会话身份验证流 352
12.2 理解基于令牌的身份验证 353
12.2.1 JWT的含义 353
12.2.2 令牌身份验证流 354
12.2.3 针对JWT使用Node.js模块 355
12.3 创建后端身份验证 356
12.3.1 使用MySQL作为服务器数据库 356
12.3.2 构建跨域应用程序目录 357
12.3.3 创建API公共/私有路由及其模块 359
12.3.4 针对Node.js使用bcryptjs模块 368
12.3.5 针对Node.js使用mysql模块 369
12.3.6 重构服务器端上的登录代码 372
12.3.7 验证服务器端上的输入令牌 374
12.4 创建前端身份验证 375
12.4.1 在（Nuxt）客户端上使用cookie 377
12.4.2 在（Nuxt）服务器端使用cookie 378
12.5 利用Google OAuth进行签名 379
12.5.1 向后端身份验证中添加Google OAuth 380
12.5.2 针对Google OAtuh创建前端身份验证 384
12.6 本章小结 387
第5部分 测试和开发
第13章 编写端到端测试 391
13.1 端到端测试和单元测试 391
13.2 端到端测试工具 392
13.2.1 jsdom 392
13.2.2 AVA 395
13.3 利用jsdom和AVA编写Nuxt应用程序测试 397
13.4 Nightwatch简介 400
13.5 利用Nightwatch编写Nuxt应用程序测试 404
13.6 本章小结 406
第14章 Linter、格式化程序和部署命令 407
14.1 Linter简介—Prettier、ESLint和StandardJS 407
14.1.1 Prettier 407
14.1.2 ESLint 410
14.1.3 StandardJS 413
14.2 集成ESLint和Prettier 414
14.3 在Vue和Nuxt应用程序中使用ESLint和Prettier 416
14.3.1 配置Vue规则 418
14.3.2 在Nuxt应用程序中分别运行ESLint和Prettier 422
14.4 部署Nuxt应用程序 424
14.4.1 部署一个Nuxt通用服务器端渲染应用程序 424
14.4.2 部署Nuxt静态生成（预渲染）的应用程序 426
14.4.3 在虚拟专用服务器上托管Nuxt通用SSR应用程序 428
14.4.4 在共享主机服务器上托管Nuxt通用SSR应用程序 428
14.4.5 在静态站点托管服务器上托管Nuxt静态生成的应用程序 430
14.5 本章小结 431
第6部分 高 级 内 容
第15章 利用Nuxt创建一个SPA 435
15.1 理解经典SPA和Nuxt SPA 435
15.2 安装Nuxt SPA 437
15.3 开发Nuxt SPA 438
15.3.1 创建客户端nuxtServerInit动作 439
15.3.2 利用插件创建多个自定义Axios实例 441
15.4 部署Nuxt SPA 444
15.5 本章小结 450
第16章 为Nuxt创建一个框架无关的PHP API 451
16.1 PHP简介 451
16.1.1 安装或升级PHP 452
16.1.2 配置PHP 453
16.1.3 利用内建PHP Web服务器运行PHP应用程序 454
16.2 理解HTTP消息和PSR 455
16.2.1 PSR 461
16.2.2 PSR-12—扩展的编码样式指南 462
16.2.3 PSR-4—自动加载器 465
16.2.4 PSR-7—HTTP消息接口 469
16.2.5 HTTP服务器请求处理程序（请求处理程序） 473
16.2.6 PSR-15—HTTP服务器请求处理程序（中间件） 474
16.2.7 PSR-7/PSR-15路由器 476
16.3 利用PHP数据库框架编写CRUD操作 479
16.3.1 创建MySQL表 479
16.3.2 使用Medoo作为数据库框架 480
16.3.3 插入记录 483
16.3.4 查询记录 484
16.3.5 更新记录 484
16.3.6 删除数据 485
16.3.7 结构化跨域应用程序目录 485
16.3.8 创建API的公共路由及其模块 489
16.4 与Nuxt进行集成 492
16.5 本章小结 495
第17章 利用Nuxt创建一个实时应用程序 497
17.1 RethinkDB简介 497
17.1.1 安装RethinkDB Server 497
17.1.2 ReQL简介 498
17.2 将RethinkDB与Koa进行集成 503
17.2.1 重新构建API目录 503
17.2.2 添加并使用RethinkDB JavaScript客户端 506
17.2.3 RethinkDB中的强制模式 512
17.2.4 RethinkDB中的changefeeds 514
17.3 Socket.IO简介 515
17.3.1 添加和使用Socket.IO服务器和客户端 516
17.3.2 集成Socket.IO服务器和RethinkDB changefeeds 519
17.4 将Socket.IO与Nuxt进行集成 521
17.5 本章小结 527
第18章 利用CMS和GraphQL创建Nuxt应用程序 529
18.1 在WordPress中创建无头REST API 530
18.1.1 安装WordPress并创建个页面 530
18.1.2 在WordPress中创建自定义文章类型 532
18.1.3 扩展WordPress REST API 534
18.1.4 集成Nuxt和WordPress中的流式图像 539
18.2 Keystone简介 545
18.2.1 PostgreSQL的安装和安全机制（Ubuntu） 545
18.2.2 MongoDB的安装和安全机制（Ubuntu） 547
18.2.3 安装和创建Keystone应用程序 549
18.2.4 创建列表和字段 553
18.3 GraphQL简介 559
18.3.1 理解GraphQL模式和解析器 561
18.3.2 GraphQL默认解析器 566
18.3.3 利用Apollo Server创建GraphQL API 567
18.3.4 使用Keystone GraphQL API 571
18.4 集成Keystone、GraphQL和Nuxt 573
18.5 本章小结 579
书中前言/序言
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上，对应网址为Packt · GitHub Hands-on-Nuxt.js-Web-Development。若代码被更新，现有的GitHub库也会保持同步更新。
读者还可访问Packt · GitHub并从对应分类中查看其他代码包和视频内容。
本书约定
代码块则通过下列方式进行设置。
// pages/about.vue
《Nuxt.js Web开发实战》全书速览
结束语
通过本文的分享讲解，读者可以通过实战使用Nuxt.js进行Web开发，可以感受到它的强大和便捷。Nuxt.js提供了丰富的功能和工具，能够帮助开发者快速构建高性能的Web应用程序。无论是单页面应用还是多页面应用，Nuxt.js都能够满足你的需求。如果你正在寻找一种简单而强大的Web开发框架，Nuxt.js将是一个不错的选择，操练起来吧！
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
26
0- 0
已为社区贡献40条内容
所有评论(0)