前端开发实战派 Vue.js3+Node.js+Serverless+Git 杨成功 著 专业科技 文轩网

第1篇 前端开发第一步：夯实基础
第1章 前端发展的几个时代 2
1.1 附属时代 2
1.1.1 前端的诞生 3
1.1.2 jQuery实现交互 3
1.2 分家时代 4
1.2.1 AJAX出现 5
1.2.2 前后端分离 5
1.2.3 三大框架出现并流行 6
1.3 工程时代 7
1.3.1 Node.js开启了前端工程 7
1.3.2 Webpack带来了编译 8
1.3.3 工程化体系持续完善 8
1.4 大前端时代 9
1.4.1 多端开发的现状 9
1.4.2 跨端开发成为趋势 10
1.4.3 一处代码，多处运行 10
1.5 Serverless时代 11
1.5.1 函数即服务 12
1.5.2 前后端一体化开发 12
1.6 本章小结 13
第2章 前端“三驾马车”，你真的掌握了吗 14
2.1 HTML：搭建页面的结构 14
2.1.1 核心DOM体系 15
2.1.2 语义化元素 20
2.1.3 了解HTML 5 23
2.1.4 实现表单与验证 25
2.2 CSS：修饰页面的布局和样式 29
2.2.1 3种页面布局方案 29
2.2.2 样式与动画解析 34
2.2.3 CSS工程化 40
2.2.4 动态值与响应式 44
2.3 JavaScript：页面运行的核心原理 47
2.3.1 数据类型与函数 47
2.3.2 变量与作用域 51
2.3.3 面向对象 53
2.3.4 事件循环 58
2.3.5 执行上下文与this 61
2.4 本章小结 64
第3章 新时代的JavaScript 65
3.1 ES6+：下一代语法标准 65
3.1.1 变量与字符串的扩展 66
3.1.2 对象的扩展 69
3.1.3 数组的扩展 73
3.1.4 函数的扩展 76
3.1.5 异步编程方案 77
3.1.6 模块体系 79
3.2 Node.js：服务端的JavaScript 81
3.2.1 Node.js基础 81
3.2.2 Node.js的内置模块 85
3.2.3 Npm包管理 88
3.2.4 环境与环境变量 92
3.3 TypeScript：支持类型的JavaScript 93
3.3.1 应该使用TypeScript吗 94
3.3.2 常用类型全览 95
3.3.3 接口与泛型 98
3.3.4 装饰器的妙用 102
3.3.5 吃透tsconfig.json 105
3.4 本章小结 106
第2篇 掌握一个主流前端框架
第4章 Vue.js 3的基础与核心 108
4.1 初识Vue.js 3 108
4.1.1 声明式渲染 109
4.1.2 组件系统 110
4.2 Vue.js的基础概念 112
4.2.1 状态与方法 112
4.2.2 条件与列表 114
4.2.3 模板语法 116
4.2.4 计算属性与监听器 118
4.2.5 事件处理 120
4.2.6 表单双向绑定 121
4.2.7 DOM操作 122
4.3 Vue.js的组件体系 123
4.3.1 组件状态：data与props 123
4.3.2 组件的自定义事件 125
4.3.3 组件的生命周期 127
4.3.4 使用插槽动态渲染模板 129
4.3.5 使用异步组件提升性能 130
4.3.6 在组件中自定义v-model 131
4.4 Vue.js 3的核心：组合式API 132
4.4.1 选项式API与组合式API 132
4.4.2 理解响应式状态 133
4.4.3 生命周期钩子 135
4.4.4 计算属性与监听器 136
4.4.5 渲染方式：模板与JSX 138
4.4.6 与TypeScript集成 140
4.5 Vue全家桶指南 143
4.5.1 路由管理——Vue Router 144
4.5.2 状态管理——Pinia 147
4.5.3 统一请求管理——Axios 151
4.6 本章小结 156
第5章 【实战】使用Vue.js 3编写一个备忘录应用 157
5.1 需求：备忘录需求分析 157
5.1.1 分析首页 158
5.1.2 分析登录页 159
5.2 设计：搭建项目的基础结构 159
5.2.1 使用脚手架创建项目 160
5.2.2 接入UI框架Element Plus 160
5.2.3 使用Vue Router配置页面路由 161
5.2.4 使用Pinia做全局状态管理 162
5.2.5 编写公共组件和公共函数 162
5.3 开发：业务功能编码 164
5.3.1 开发登录页 164
5.3.2 编写用户Store 166
5.3.3 开发首页 169
5.3.4 编写首页Store 171
5.3.5 开发文件夹列表组件 173
5.3.6 开发备忘录列表组件 175
5.3.7 开发编辑器组件 177
5.3.8 实现备忘录编辑 179
5.4 本章小结 181
第3篇 从3个方向提升技术实力
第6章 构建工具Vite——将新技术的代码转换为浏览器认识的语法 183
6.1 认识构建工具 183
6.1.1 老牌工具——Webpack 184
6.1.2 轻量工具——Rollup 185
6.1.3 下一代工具——Vite 186
6.2 在项目中使用Vite 187
6.2.1 使用脚手架创建项目 187
6.2.2 Vite的基础命令 188
6.3 Vite功能介绍 189
6.3.1 裸模块解析 189
6.3.2 依赖的预构建 190
6.3.3 模块热替换 191
6.3.4 TypeScript转译 192
6.3.5 JSX/TSX转译 193
6.3.6 CSS资源处理 193
6.3.7 静态资源导入 195
6.4 Vite配置介绍 197
6.4.1 多环境配置 197
6.4.2 通用配置 198
6.4.3 开发服务器配置 201
6.4.4 打包构建配置 203
6.4.5 性能优化配置 205
6.5 Vite插件系统 206
6.5.1 Vite官方插件 207
6.5.2 Vite社区插件 208
6.5.3 Rollup插件 209
6.6 本章小结 211
第7章 利用浏览器解决在开发中遇到的问题 212
7.1 浏览器的组成与渲染原理 212
7.1.1 浏览器的组成 212
7.1.2 渲染引擎的工作原理 214
7.1.3 重排与重绘 215
7.2 开发者工具 217
7.2.1 打开DevTools 218
7.2.2 DevTools的结构 219
7.3 “元素”面板 222
7.3.1 DOM树的查看与调试 222
7.3.2 CSS的查看与调试 223
7.4 “控制台”面板 226
7.4.1 打印日志 226
7.4.2 执行JavaScript代码 229
7.4.3 其他console功能 230
7.5 “源代码”面板 232
7.5.1 查看网页源码 233
7.5.2 断点调试 234
7.5.3 作用域、调用栈、事件监听 236
7.6 “网络”面板 238
7.6.1 捕获网络请求 238
7.6.2 请求的筛选过滤 239
7.6.3 单条请求详解 240
7.6.4 网络功能设置 241
7.7 “应用”面板 242
7.7.1 Cookie管理 243
7.7.2 WebStorage管理 244
7.8 本章小结 245
第8章 前端性能优化全览 246
8.1 认识性能优化 246
8.1.1 从渲染原理开始 247
8.1.2 网络层面的优化 247
8.1.3 渲染层面的优化 249
8.2 检测性能问题 250
8.2.1 主观感知性能 251
8.2.2 利用“性能”面板检测性能 251
8.2.3 利用Lighthouse检测性能 254
8.2.4 项目打包后的性能检测 256
8.3 首屏渲染优化 257
8.3.1 首屏变慢的原因 257
8.3.2 优化措施一：路由懒加载 258
8.3.3 优化措施二：Gzip压缩 258
8.3.4 优化措施三：服务端渲染 260
8.4 网络资源优化 261
8.4.1 图片异步加载 262
8.4.2 高效利用缓存 263
8.5 交互性能优化 264
8.5.1 防抖与节流：减少事件触发 265
8.5.2 异步更新：减少重复渲染 267
8.5.3 减少DOM操作 268
8.6 本章小结 271
第4篇 光有技术不够，还要懂团队协作
第9章 Git命令与协作指南 273
9.1 初识Git 273
9.1.1 什么是版本控制 273
9.1.2 Git的工作原理 274
9.1.3 安装Git 276
9.2 Git的基础操作 277
9.2.1 Git的基础配置 277
9.2.2 文件跟踪与暂存区 278
9.2.3 创建和查看提交 279
9.2.4 撤销与回滚 280
9.2.5 合并提交 282
9.2.6 管理标签与别名 283
9.3 分支管理 285
9.3.1 分支简介 286
9.3.2 分支的创建、删除和切换 286
9.3.3 分支的合并 287
9.3.4 分支的管理策略 289
9.4 远程仓库GitHub 290
9.4.1 创建远程仓库 290
9.4.2 代码的推送和拉取 291
9.4.3 管理远程的Tag 293
9.4.4 查看远程提交信息 293
9.5 Git的高级操作 295
9.5.1 变基——git rebase 295
9.5.2 拣选——git cherry-pick 297
9.5.3 暂存——git stash 298
9.5.4 检索——git grep 298
9.5.5 调试——git bisect 299
9.6 本章小结 301
第10章 代码规范实践 302
10.1 认识代码规范 302
10.1.1 为什么需要代码规范 303
10.1.2 代码规范包含的内容 303
10.2 代码规范落地 304
10.2.1 制定规范 304
10.2.2 检测和统一规范 312
10.3 工具一：ESLint 313
10.3.1 安装与初始化 314
10.3.2 配置文件解析 314
10.3.3 代码检查 316
10.3.4 自定义规范 317
10.4 工具二：Prettier 318
10.4.1 安装与配置 319
10.4.2 格式化代码 320
10.5 工具三：VSCode 321
10.5.1 使用插件 321
10.5.2 编辑器的配置 322
10.5.3 共享配置 323
10.6 Git提交的规范 324
10.6.1 制定规范 324
10.6.2 验证规范 325
10.7 本章小结 326
第5篇 综合实战——全栈开发“仿稀土掘金”项目
第11章 项目需求分析与API开发基础 328
11.1 项目需求分析 328
11.1.1 首页模块 329
11.1.2 文章模块 329
11.1.3 沸点模块 331
11.1.4 用户中心 332
11.1.5 消息中心 332
11.2 使用Serverless云函数创建接口 333
11.2.1 注册阿里云，开通函数计算 334
11.2.2 创建服务，编写项目所需的云函数 335
11.3 API开发基础——Express框架的使用 340
11.3.1 Express框架的基本结构 340
11.3.2 使用路由创建API接口 342
11.3.3 理解中间件，搞懂框架的原理 345
11.3.4 统一错误处理，提升应用的健壮性 346
11.4 API开发基础——数据库操作 347
11.4.1 MongoDB的基本概念 347
11.4.2 实现增、查、改、删操作 348
11.4.3 高级查询——聚合管道 350
11.4.4 使用mongoose操作数据库 351
11.5 本章小结 355
第12章 后端API接口开发与部署 356
12.1 开发用户管理接口 356
12.1.1 用户注册接口 358
12.1.2 用户登录接口 360
12.1.3 修改用户信息接口 362
12.1.4 更新掘力值、点赞量和阅读量 363
12.2 开发文章管理接口 364
12.2.1 创建与发布文章接口 366
12.2.2 修改与删除文章接口 367
12.2.3 文章的点赞和收藏接口 368
12.2.4 文章评论接口 371
12.2.5 文章列表接口 376
12.2.6 文章详情接口 378
12.3 开发沸点管理接口 379
12.3.1 创建沸点接口 381
12.3.2 沸点列表接口 381
12.3.3 沸点评论与点赞接口 382
12.3.4 沸点删除接口 383
12.4 开发消息与关注接口 383
12.4.1 未读消息接口 384
12.4.2 关注与取消关注接口 386
12.4.3 关注者列表接口 388
12.5 项目完善与部署 389
12.5.1 添加JWT登录验证 389
12.5.2 使用分页查询列表 392
12.5.3 统一处理路由异常 394
12.5.4 将代码发布到云函数中 395
12.6 本章小结 397
第13章 前端页面功能开发与部署 398
13.1 搭建项目框架和页面结构 398
13.1.1 创建项目、安装依赖和修改目录结构 398
13.1.2 添加全局样式和代码规范配置 400
13.1.3 添加统一路由配置、统一请求配置 402
13.1.4 初始化Git仓库并添加相关配置 404
13.2 开发全局公共组件 405
13.2.1 开发根组件App.vue 406
13.2.2 开发头部组件 407
13.2.3 开发登录组件 409
13.2.4 开发编辑器组件 412
13.3 开发首页 414
13.3.1 开发文章分类子组件 414
13.3.2 开发文章列表子组件 415
13.3.3 创建文章Store，定义状态和方法 416
13.3.4 创建首页入口组件，组合各个子组件 417
13.4 开发文章详情页 419
13.4.1 开发文章的点赞、收藏功能 419
13.4.2 开发Markdown渲染组件 420
13.4.3 开发文章内容展示模块 421
13.4.4 开发文章作者和目录模块 422
13.5 开发用户中心页 423
13.5.1 开发用户基本信息模块 423
13.5.2 展示用户的文章和沸点数据 424
13.5.3 开发用户的个人成就模块 425
13.6 开发消息中心页 426
13.6.1 开发消息类型tab标签 426
13.6.2 开发消息列表模块 427
13.7 开发文章编辑发布页 428
13.7.1 导入编辑器，编写页面基本结构 428
13.7.2 添加发布弹框，编辑发布选项 430
13.7.3 监听文本编辑，实现自动保存 431
13.8 开发沸点页 432
13.8.1 开发沸点圈子组件 433
13.8.2 创建沸点Store，定义状态和方法 433
13.8.3 开发沸点列表组件，展示和操作沸点 434
13.8.4 开发沸点入口组件，新增创建沸点模块 435
13.9 项目打包、部署与解析 437
13.9.1 打包项目并上传到服务器上 437
13.9.2 使用Nginx配置项目域名并解析 437
13.10 本章小结 438