书籍详情
前端开发实战派:Vue.js 3+Node.js+Serverless+Git
作者:杨成功
出版社:电子工业出版社
出版时间:2024-01-01
ISBN:9787121469671
定价:¥128.00
购买这本书可以去
内容简介
本书从实战的角度出发,提炼并总结项目开发中需要掌握的前端知识,既可以为前端开发初学者提供清晰的学习路径,又可以为具有3~5年经验的开发者提供进阶的方向。 本书包括5篇。第1篇介绍前端基础,包括前端"三驾马车”(HTML、CSS、JavaScript)和新时代的JavaScript(ES6+、Node.js、TypeScript);第2篇介绍前端框架,围绕Vue.js 3的基础知识点和Vue全家桶展开介绍,并使用Vue.js 3实战开发一个备忘录项目;第3篇与第4篇介绍前端中级和高级知识(构建工具Vite、浏览器高阶调试、性能优化、Git协作、代码规范)在项目开发中的应用;第5篇全栈开发"仿稀土掘金”项目,帮助读者通过实战将书中的知识融会贯通。 本书内容由浅入深,将理论与实战相结合。读者如果已经掌握了"HTML + CSS + JavaScript”基础,那么学习本书可以快速打牢基础,并逐步完善自己的前端知识体系,最终具备中级和高级前端与全栈开发的能力。
作者简介
杨成功一线前端工程师,擅长前端工程与架构,音视频,Node.js。带领团队实施和重构过多个项目,对前端应用的标准化、自动化以及前后端一体化开发有丰富的实践经验。掘金、思否原创作者,累计产出文章50 余篇,阅读40w+。现任某厂前端架构师。
目录
第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
第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
猜您喜欢