电子工业出版社-网上书店

本书从实战的角度出发，提炼并总结项目开发中需要掌握的前端知识，既可以为前端开发初学者提供清晰的学习路径，又可以为具有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”基础，那么学习本书可以快速打牢基础，并逐步完善自己的前端知识体系，最终具备中级和高级前端与全栈开发的能力。

第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

1．本书的特色
（1）从零起步，技术新。
本书从零开始讲起，循序渐进，对前端的初学者非常友好，可以帮助其快速掌握前端技术的原理、架构及实战应用。
本书介绍并使用了ES6+、TypeScript、Vue.js 3等，它们是当前和未来的主流方向，可以保证本书内容长期不会过时。除介绍新技术外，本书还介绍了大量的通用架构设计和解决问题的思路，这些思路不会随着技术的更新而失去价值，所以它们是本书质量的保证。
在项目实战中，本书采用ES6+（ES2015 ~ ES2022）和TypeScript 4.7编写代码，使用Vue.js 3.2和Vite 4.4相结合的框架，并且在版本不低于16的Node.js环境下运行。由于各方面都贴合当前主流技术的主流版本，因此读者可以放心阅读本书。
（2）路径清晰，循序渐进。
在掌握了前端“三驾马车”和前端框架之后，基本上可以满足初级开发者日常开发工作的需求。但是在后期想要提升技术时，面对浩瀚如海的前端知识，很多初级开发者不知道应该从哪里学起。本书为前端开发者提供了从初级到高级的非常清晰的学习路径，让其知道当前应该学什么，下一步应该学什么，哪些是重要的，哪些是无关紧要的，在确保学习方向正确的前提下，循序渐进地理解和掌握每个知识点。
本书的前半部分主要介绍前端基础+框架，目的是帮助读者打牢前端基础并学会使用框架完成工作。本书的后半部分重点介绍浏览器、性能优化、Git协作等内容，从多个方面扩展前端知识体系，提升读者的技术视野，培养读者解决复杂问题的能力。通过阅读本书，读者可以建立前端知识体系。
（3）包含丰富的实战案例。
本书介绍了大量的实战案例，能让读者“动起来”，在实践中体会功能，不单单是一种概念上的理解。
在讲解每个知识模块时，笔者一直在思考：在这个知识模块中，哪些“标准动作”（实例）是读者必须实现的；哪些“标准动作”是可以先完成的，以求让读者能快速感知；哪些“标准动作”是有一定难度的，需要放到后面完成。读者在跟随书中的一个个实战案例实践之后，再理解那些抽象的概念和原理就会达到事半功倍的效果。
本书没有大量晦涩难懂的理论和原理，而是从实战和解决问题的角度梳理那些更重要的、更实用的前端知识体系，把在实战过程中积累的思路、关键点和要点总结起来，组成一份“实战宝典”。
（4）包含丰富的图片示例，理解原理和流程更容易。
一图胜千文，在涉及原理、流程、实战案例的地方本书都尽量配置图片，以便读者可以直观地看到或理解重要的内容。原理相关的配图笔者并没有照搬文档，而是用更直白的方式自行绘制，让读者更容易理解；关于实战配图，笔者将关键步骤的结果以图展示，让读者看清楚实际的执行结果。
（5）包含完整的大项目，实现“从树木到森林”的突破。
第5篇为综合实战，全栈开发一个“仿稀土掘金”项目。这个项目是对全书内容的综合应用，其复杂的设计、交互、逻辑可以帮助读者快速积累实战经验。
首先介绍Express框架和MongoDB数据库，让读者对API开发有基本的认识；然后编写项目的接口部分，并结合阿里云的Serverless函数计算将项目部署上线。
项目的前端部分依然使用Vue.js 3全家桶开发，同时对接真实的API接口，最终完成一个完整的可交付的项目。在全栈开发项目的过程中，读者会逐渐将书中介绍的知识融会贯通。
（6）提供项目级的代码，可复用。
本书提供综合实战项目的完整配套代码。将书中内容和配套代码结合起来阅读，通过“代码+讲解”的方式来讲解，让读者对项目实战的理解和消化更透彻。
综合实战项目的代码规模较大、逻辑复杂，包含前端和后端两套代码，并且有完整的运行配置、部署配置等详细描述。读者获取源码后不仅可以学习本项目的实战内容，还可以将其结构运用到其他项目上，也可以复用这套代码全栈开发自己的项目。
2．本书的读者对象
 初学前端的自学者。	 培训机构的老师和学员。
 对前端感兴趣的IT人员。	 高等院校计算机相关专业的学生。
 具有3～5年经验的前端工程师。	 具有中级和高级进阶需求的前端工程师。
 带团队的前端负责人。	 使用JavaScript的全栈工程师。
3．致谢
感谢拿到本书的你，通过文字建立交流本身就是一种缘分，感谢你的阅读和支持。

本书配套资源下载

对不起，暂无音视频资源！

前端开发实战派——Vue.js 3+Node.js+Serverless+Git