内容简介

本书从实战的角度出发，提炼并总结项目开发中需要掌握的前端知识。

本书既可以为前端开发初学者提供清晰的学习路径，又可以为具有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）从零起步，技术新。

本书从零开始讲起，循序渐进，对前端的初学者非常友好，可以帮助其快速掌握前端技术的原理、架构及实战应用。

本书介绍并使用了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年经验的前端工程师。

◎ 具