Nuxt.js Web开发实战

作者: [马来西亚] 郭隆添著 , 张骞译

出版社: 清华大学出版社

出版时间: 2023-02

版次: 1

ISBN: 9787302622031

定价: 159.00

装帧: 其他

开本: 16开

纸张: 胶版纸

分类: 计算机与互联网

7 张插图图片

2人买过

《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 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 Web开发实战

内容简介:

作者简介:

目录: