全栈工程师是指掌握多种技能，并能利用多种技能独立完成产品的人。所以在这里我把全栈的学习路线分成了前端和后端两部分学习路线，各位小伙伴们可以分别学习前端部分和后端部分，进行相对的工作应聘，也可以一群学完找全栈工程师。

不过就目前行业而言很少有单位需要全栈工程师，只有一部分小公司才需要这样的岗位，所以在这里，我建议各位小伙伴们可以分别学习这两个模块的知识，等以后工作又需要的时候在过来进行观看。

随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！

在看本文章建议最好与前端路线整合一起看

在这里我推荐的是siki学院的siki老师出的b站免费视频。

推荐视频：html 这个视频上对html的解释是非常的细，很多常用的内容都有说到，该课程是html并非html5如果需要了解html5的请点击h5+css3。

在这部分我推荐关于css的基础知识、盒子模型、定位布局、浮动布局都可以看这个免费提供的视频：css 对于css的flex布局可以看看黑马提供的这部分知识。

推荐视频：css的flex

推荐书籍：HTML & CSS设计与构建网站

当小伙伴们学到这里的时候可以做一些静态网页啦！可以根据一些自己常用的网站仿照做一个，也可以根据一些视频教程。小伙伴们可以一起来看看这些视频跟着一起做。

推荐视频：前端HTML+CSS实战项目全集 当然，我相信很多小伙伴们都是对自己高要求的，所以这个项目集合里面不仅仅是一个单独的静态项目，还有不少，响应式开发、弹性布局等一些列前端常用的前端小项目技巧！ 我相信有的小伙伴可能已经不限于只想做PC端的项目，摩拳擦掌的想做移动端web页面了吧！不要急，等我们往下看！在这里我建议小伙伴们最好还是学一下h5+c3在做移动端web页面吧

h5+c3不建议小伙伴们多怎么怎么深入的了解，毕竟html和css我们在之前已经打过基础了，我相信小伙伴们前面学到非常熟悉了，在这里我对h5和c3的建议是了解即可，我推荐大家可以看一看黑马教程的b站免费视频。

推荐书籍：HTML5+CSS3从入门到精通 (豆瓣)

推荐视频：h5(html5)+css3+移动端前端视频教程 直接从第274个视频开始看就好了。当然如果小伙伴们还想回顾一下知识也是可以从头开始看的。在这个视频的最后有一个h5+c3的项目实战，对于想做移动端web页面的小伙伴们可是非常感兴趣的项目。如果做的不过瘾，也可以来看看尚硅谷的《谷粒音乐》。

推荐视频：《谷粒音乐》

小伙伴们学到这里，也算是一只脚踏入了前端工程师了，当然目前肯定还是远远不够的。很多刚入门的小伙伴经常纠结什么样子可以找到工作，其实学到这里的小伙伴们可以去找工作了。但是！！！重点来了，仅仅会这些1是得不到高薪，这就是我们常说的切图工作；2是由于由于阿里巴巴出了一个ImgCook插件，可以用美工给的ps设计图，自动识别出html、css等一些列的代码。所以！！！不要止步于此，所以接下来，来到了我们第二阶段的学习！

看到这里的小伙伴们肯定是对html和css有深刻的学习和了解了，我相信小伙伴们肯定不仅限于只是想做一个静态的前端页面，肯定想更深入的了解前端知识。有的小伙伴们肯定有很多大大的问号：“为什么我感觉我学完这些并没什么用，现在流行的是动态网页，实现的是前后端分离，那我学这些有什么用？静态网页修改内容都非常麻烦，要它何用？而且做特效也是非常的麻烦，不如不学，直接从入门入土。”请不要这么轻易的放弃，接下来才是重头戏，我要给大家介绍前端三剑客的第三位“老师”——JavaScript。 javascript分为三部分组成：

EMCAScript：描述了JS的语法和基本对象

BOM(浏览器对象)：与浏览器交互的方法和对象

DOM(文档对象模型)：处理网页内容的方法和接

首先我们来学习一下EMCAScript基本语法，也就是JavaScript基础语法

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层，其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。

这是我在百度上找到对JavaScript的定义，那么多字？看的头疼？ok！通俗易懂的说就是，JavaScript的存在让我们可以把静态网站变成动态网站，可以让我们把静态数据直接动态的获得后端提供的接口或者是直接从云数据库中获得内容信息，还有可以帮我们做一些更多的特效，让我们使用更简单更方便！！！心动了吗？ 在这里我推荐想快速入门的小伙伴们，可以快看siki学院出的前端JavaScript视频教程。

推荐书籍：JavaScript权威指南（原书第7版）

推荐视频：Web前端第三季（JavaScript） 这个教程它把JavaScript的语法都大体的说了一遍，虽然不是很细节，但是对于想快速入门的小伙伴们学习是足够的，再配上一个前端特效实战篇：Web前端特效第一季 我相信它们一定可以帮你大幅度的提升前端制作特效的能力，别愣着了，快行动起来吧！！！ 当然，我相信有不少的小伙伴们想更深入的了解JavaScript的，肯定是想把JS学的更深更透彻，那怎么办呢？在这里我推荐大家可以看看黑马程序员提供的b站免费教学视频。

推荐视频：JavaScript基础语法-dom-bom-js-es6新语法 这个教程把JavaScript的绝大部分知识点都讲的很透彻包括dom也涉及到了。但是！！！但是！！！但是！！！重点来了，这个视频教程涉及到了jquery部分知识，这里不建议大家深入了解，知道jquery是什么东西就好了，虽然目前有类似于bootstrap这些前端样式还是用的是jquery，但是jquery目前并没有那么流行，小伙伴们学习肯定是学更多先进的知识。jquery虽然已经淘汰了，但是他的JavaScript源码还是非常不错滴，建议小伙伴们可以更深入的了解一下，他们的源码。由于jquery淘汰较为久远，我在这里并没有找到较好点的视频，不过大家可以看一下这个。

推荐视频：jQuery源码视频 虽然出的时间很长，但是作为学习了解一下还是可以的。

当小伙伴们学完了JavaScript的基础语法，可以进行下一步的学习了。首先，我需要解释一下什么是DOM，什么是BOM以及DOM和BOM的区别，避免小伙伴们混淆。 BOM是浏览器对象模型 提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等） 通俗易懂的说就是BOM是对浏览器进行操作的！！！ DOM是文档对象模型 DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。 可以理解为DOM是操作html里面的标签。 我相信看到这里，各位小伙伴们肯定看懂了什么是DOM和BOM以及他们都有一个大体的认知吧！各位小伙伴在学习DOM和BOM，我推荐大家可以看看B站上黑马程序员提供的免费教程。

推荐视频：黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作 这个教程里不仅介绍了如何操作DOM和BOM还介绍了一些常见的特效是怎么实现的，我觉得是一件各位小伙伴们值得深入学习的一件事情！

es6+的新特性是什么？为什么要了解？我相信很多小伙伴们都有很大的疑问，首先es6+是什么呢？ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 另外，一些情况下ES6+也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。我们为什么要学es6而不是es5呢，现在很多公司应聘的要求就是必须要会es6的，es6已经普遍成为了行业标准。首先，ES5不能满足目前前端越来越复杂，庞大的现状，可以说已经过时了，ES6是对ES5的增强和升级。其次，主流的浏览器都已经全面支持ES6。并且行业内较新的前端框架都已经全面使用ES6的语法，甚至微信小程序,uni-app等都是基于ES6的语法。从就业出发，中小型公司，全栈，简历上多一个技能，试用期也能更快的上手。 在这里我给大家推荐一下尚硅谷的这部分课程。

推荐视频：尚硅谷Web前端ES6教程，涵盖ES6-ES11

推荐书籍：深入理解ES6

这个课程涉及了绝大部分es6+的语法很适合各位学习和使用。

首先，我要向大家解释一下什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

这个是我在百度上为大家找到的解释，通俗的说，ajax就是请求动态数据的。我推荐大家看看B站的尚硅谷的视频。

推荐视频：3小时Ajax入门到精通 在这一部分视频中涉及到了部分node后台框架的知识，先让各位小伙伴们学习学习了解一下。没有前端展示后端是没有用的，没有后端请求的接口前端也没有办法动态展示数据。如果小伙伴们不是过多的想了解后端技术，在想前端请求后端数据如果没有后端数据怎么写呢？这里有一些可以直接请求前端需要的api接口 ！推荐大家可以看看这篇文章，里面有很多的接口学习。

推荐文章：在线接口 学完以后，小伙伴们可以跟着这个视频做一些案例，来强化一下自己对ajax的这方面知识的学习和增强巩固。

推荐视频：Ajax从放弃到知根知底

推荐书籍：深入浅出Ajax（中文版） (豆瓣) (douban.com)

typescript是什么？它和JavaScript有什么关系？我相信小伙伴们有很多疑惑。我先给各位小伙伴们解释一下typescript。简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript 。 有的小伙伴们可能会想我已经学过了javascript还有必要学typescript吗？答案是当然有必要的，首先JavaScript的变量声明是弱类型的，它并没有实际使用的是数值字符还是什么类型，但是typescript不一样，它是直接增强了JavaScript的变量，解决了很多问题。

实际上，一项研究表明，TypeScript可以检测到所有JavaScript错误的15％。 动态类型的自由特性经常会导致错误，这些错误不仅会降低程序员的工作效率，而且还会由于增加新代码行的成本增加而使开发陷入停顿。 因此，JavaScript无法合并类型以及编译时缺乏错误检查，使它不适合作为企业和大型代码库中服务器端代码。 所以，你们说有必要学习吗？在这里我为大家推荐的学习视频首先是技术胖的typescript的快速入门。

推荐视频：TypeScript从入门到精通视频教程 这个视频把很多JavaScript和typescript不一样的点标明清楚，非常值得你们拥有。其次也可以看看尚硅谷的B站免费视频。

推荐视频：尚硅谷TypeScript教程

推荐书籍：TypeScript编程 (豆瓣) (douban.com)

后期很多项目实战的练习可以更好的为你巩固typescript的基础知识。

当小伙伴们学到这里已经非常的优秀，你们已经学完了前端所有的基础，接下来就是前端的进阶版本和框架技术等。框架技术就是现在流行的三大框架技术和前后端分离技术等关键点后续我们都会提及到。但是，就算在流行的技术也抵挡不住基础的巩固，所以我希望小伙伴们可以在学好和巩固了前面的知识再继续往下面学习！毕竟很多面试官问的都是基础知识，像是ts是什么？盒子模型是什么？ts和js的区别等等，这些都是面试官可能会问道的。所以各位小伙伴们加油，让我们一起努力！！！fire！！！

学完前面两个阶段，我相信各位小伙伴们已经对前端基础非常的了解了，接下来第三阶段我们要学习的是版本控制管理系统。版本控制管理系统是什么呢？ 版本控制是管理信息修改的艺术，他是一个开发者最重要的工具之一，由于开发者经常性的修改代码，如果不做出一定的版本控制仅靠注释掉或者备份的形式进行，那么在经过一段时间后，先不说是否能记住更改的地方，能不能还原到想要的版本都是非常困难的。想象一下，一个高达几十上百人的开发团队并行进行工作，需要经常性的同时处理同一个文件，如果没有一定的版本控制机制，将会是怎样的混乱情况。 软件开发工作往往是多人协同作业，版本控制系统可以有效地解决版本的同步以及不同开发者之间的开发通信问题，提高协同开发的效率。并行开发中最常见的不同版本软件的错误(Bug)修正问题也可以通过版本控制中分支与合并的方法有效地解决。

首先和各位小伙伴们即使一下git是什么，git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。在这里我推荐B站尚硅谷的git的视频教程。

推荐视频：Git与GitHub基础全套完整版教程这里讲的非常详细，大家可以放心观看。 喜欢文字版的小伙伴，推荐看廖雪峰的 Git 教程，很浅显易懂 廖雪峰的 Git 教程：Git教程 - 廖雪峰的官方网站 方便查阅的 Git 中文手册：Git - Book

首先像小伙伴们解释一下什么是 Github? github是一个基于git的代码托管平台，付费用户可以建私人仓库，我们一般的免费用户只能使用公共仓库，也就是代码要公开。 Github 由Chris Wanstrath, PJ Hyett 与Tom Preston-Werner三位开发者在2008年4月创办。迄今拥有59名全职员工，主要提供基于git的版本托管服务。 那么什么是gitee呢？ Gitee.com(码云) 是 OSCHINA.NET 推出的代码托管平台,支持 Git 和 SVN,提供免费的私有仓库托管。目前已有超过 600 万的开发者选择 Gitee。Gitee是开源中国（OSChina）推出的基于Git的代码托管服务 。Gitee包括三个版本，分别是：社区版、企业版和高校版。 对于这部分知识我建议各位直接观看文档就好了，我这里就不给大家推荐视频了。

学完平台管理系统之后，我们要来讲一下css预处理语言（css的进阶版本）。css预处理语言是什么呢？CSS预处理器是一种专门的编程语言，用来为CSS增加一些编程特性（CSS本身不是编程语言）。不需要考虑浏览器兼容问题，因为CSS预处理器最终编译和输出的仍是标准的CSS样式。可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。CSS预处理器主要目的：1、CSS语法不够强大（例如：CSS选择器无法进行嵌套，导致CSS中存在较多重复的选择器语句）；CSS中无法定义变量以及没有合理的样式复用机制，导致整体CSS样式难以维护。2、为了减少CSS代码冗余，为CSS提供样式复用机制，提高CSS代码的可维护性。

Sass是什么呢？Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。 我们为什么要选择sass呢？首先完全兼容 CSS3，其次在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能，并且通过函数进行颜色值与属性值的运算，还拥有提供控制指令 (control directives)等高级功能。话不多说我给大家上视频。

推荐视频：SCSS从入门到实战 CSS预处理器SASS从入门到高级进阶—完整视频课程 这两个视频讲解的非常详细。但是，如果有的小伙伴们像快速上手，我推荐大家可以看看这个视频，可以帮助小伙伴们快速了解css预处理语言。

推荐视频：Sass基础

这里像小伙伴们解释一下Less是什么，Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node 或浏览器端。在这里我给大家推荐B站的这个视频。

推荐视频：Web前端Less经典教程

个人觉得这个学习视频对于less的讲解是非常详细的。

css预处理语言是选择性学习，但是建议最好各位小伙伴们可以看看了解一下，必经学了这些可以打打节省写css的时间，它们比css更接单易学。当然，各位小伙伴们也可以在就业或者学完这一些列课程的时候在学习，毕竟不会css预处理语言也不印象我们后面的课程的学习。不过会这些在未来面试和简历上写出来是可以加分的哦，不会也没关系，毕竟css才是基础，它们是css进阶的存在，会css也是可以的。

学完前面四个阶段的小伙伴们，欢迎来到第五阶段—前端样式框架。经常觉得制作样式困难麻烦，但是又没有办法解决这些问题，没关系我来帮你们解决这个问题，我在这里为大家提供一些前端样式框架集合供小伙伴们享用。让小伙伴们用最少的时间做最多的事情

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，是基于html和JavaScript、css三者开发的框架，主要用于响应式网站上的结构和布局。那么我们为什么在这里推荐Bootstrap呢？原因很简单：

在这里我推荐大家可以根据尚硅谷的B站免费视频进行学习。 推荐视频：尚硅谷Bootstrap教程(bootstrap框架讲解)

推荐书籍：CSS高效开发实战—CSS 3、LESS、SASS、Bootstrap、Foundation (豆瓣) (douban.com)

学完了Bootstrap，我们就要来到echart.js的学习了。我先给大家解释一下什么是echarts

从官网的解释我们可以知道echarts是商业级数据图表，是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

这是官方文档的解释，其实通俗的说echarts就是数据可视化的库。在这里我不是很推荐大家去看视频，因为我觉得官网的已经说的非常详细了，所以如果各位小伙伴们想了解的话可以看看官网。

**官网文档地址：**https://echarts.apache.org/handbook/zh/get-started/ 当然，如果还是有想看视频学习的小伙伴们可以看看黑马的这个视频讲解的还是很不错的，但是还是希望小伙伴们可以看看官网自学，毕竟身为程序员会看文档的能力是非常重要的，而且文档永远讲解的都是非常细致的。

推荐视频：echarts数据可视化项目教程

layui是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年秋，它区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是为服务端程序员量身定做，开发者无需涉足各种前端工具的复杂配置，只需面对浏览器本身，使得开发十分便捷。 事实上，layui 更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效。它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块。 layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身。

总的来说就是layui也是一种前端样式框架，它比较偏向于后端开发人员更容易接受的前端样式框架，回归开发本身技术。 在这里我给大家推荐B站的这个关于layui的免费视频：

**推荐视频：**史上最通俗易懂的Layui前端框架 大家在学习的过程中可以根据layui官网进行学习观看：

官网文档地址https://www.layuiweb.com/

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。Three.js（类似于JQuery）在浏览器提供的 WebGL 接口之上又做了一层封装。WebGL 是在浏览器中实现三维效果的一套标准。WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 前端开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

three.js也就是所谓的类似于实现前端VR的一种框架，这里不做强制性的学习，因为像three.js这样的需要3D建模的框架一般公司是有专门人负责的，而且一般面试前端很少几乎不会问这样的问题，因为像这样3D建模是比较消耗浏览器性能的，所以各位小伙伴们只需要了解即可。

推荐视频：three.js最新入门课程 如果对这比较感兴趣的小伙伴们可以去专门学习3D Web 图形。当然这里还有一个推荐与vue3.0有关的实战项目，小伙伴们也可以尝试做一下，或等到后期学到vue后在会过来尝试一下：

推荐视频：Vue3+threejs打造沉浸式商城企业项目实战

推荐书籍：Three.js开发指南 (豆瓣) (douban.com)

当我们学完前端样式框和数据可视化工具后，我们离前端大神更进一步，我们可以降低一些写前端样式和展示数据的时间更注重于前端的性能，解决更多需要关注的问题。

第六阶段是我们包管理工具，我们先介绍一下包管理工具。 在多年前的前端项目中，前端工程师们开始使用jQuery等经典的第三方JS工具库，这大大地提高了我们前端项目的开发速度，当时前端工程师们使用它的方法一般为，在官网上下载相关版本的JS静态文件，然后放在我们自己的项目中，或者使用CDN引入等方式。 但是这种开发方式也带来了一些问题: 如果我们引用的a.js，它同时依赖于b.js和c.js，那我们在下载a.js的同时，也要下载b.js和c.js文件，并且在文件里它们的引用顺序也有讲究，如果顺序不对，就会出现各种问题。 第三方JS工具库会经常更新迭代，作为开发者的我们，就要经常关注第三方库的动态，如果有更新，就需要将文件重新下载下来，替换原来项目中的文件。 这些问题被发现后，一批具有开拓精神的程序员提出了新的想法和思路，于是就出现了包管理工具，彻底终结了以上的问题。 大家可以看看掘金的这篇文章可以学习一下：

**推荐文章：**https://juejin.cn/post/7049528035216736293

npm是Node.js官方提供的，它的出现同时也制定了一些包管理规范： 所有的第三方依赖包都放在node_modules这个文件目录下，我们在增加，删除，升级依赖也只是更新这个文件下的相关依赖包。 package.json文件中存放本项目及项目的依赖和版本信息，这样我们就可以知道本项目用到什么，都是什么版本，不用多处寻找。 话不多说上视频：

推荐视频：包管理工具 #node package manager

yarn是Facebook发布的作为项目的包管理工具，快速、安全、可靠。 度快：Yarn缓存了每个下载过的包，再次使用时无需重复下载。同时它是并行的，因此安装速度更快。 安全：在执行代码之前，Yarn会通过算法校验每个安装包的完整性。 可靠：使用详细简洁的锁文件格式和明确的安装算法，使Yarn能够在不同系统上保证无差异的工作 我们既然有npm为什么还要yarn呢？ 首先对比npm安装依赖的速度，yarn可以说是完全碾压 其次关于错误提示，yarn做的更加人性化，使用npm，如果安装依赖时发生错误，npm会继续打印之后的安装日志，开发者很难注意到到底哪里安装报错 所以相比npm我们也要会使用yarn来学习的。 关于yarn的学习B站没有太多学习好的学习视频，在这里我给大家推荐一个关于yarn的知识文档

**推荐文档：**https://juejin.cn/post/7049528035216736293

大家可以看看这个进行学习和整理。

学会了包管理工具我们就可以不需要再关注第三方JS工具库会经常更新迭代的问题，作为开发者的我们，也就不需要经常关注第三方库的动态，甚至来说如果更新了，也需要将文件重新下载下来，替换原来项目中的文件，让我们彻底解放双手，更加关注于如何写代码。有了这个基础我们就可以来到第七阶段前端框架知识的学习，实现主流的模块化开发了。

本章学习PWA不做过多要求学习，Vite和Webpack选择其中一个进行学习即可。 在日常项目开发中构建工具是必不可少的，所以也是我们需要掌握学习的一个重要部分，在技术蓬勃发展的今天，许多优秀的构建工具涌现出来，前端主流打包工具主要有 Grunt，Gulp，Rollup，Webpack，Vite，Parcel等。在这里我对Webpack和Vite进行对比的介绍一下。 Webpack—-适合打包项目 配置项复杂，社区丰富 在webpack项目中需要使用的静态资源，css，以及less等预处理器需要手动引入对应的loader才能使用, 支持代码分割，热更新，丰富的插件系统，通过使用loader可以解析各种类型的资源等 缺点：冷启动，热更新随着项目体量增大而变慢，体量大的项目热更新一次甚至需要几分钟、

webpack的底层原理 找到入口->形成文件之间的依赖关系树=>通过loader处理对应资源=>生成打包结果=>启动本地服务进行渲染=>浏览器请求，整个包返回

Vite—-适合打包项目 开箱即用 对于项目中需要的静态资源，html，less等无需手动引入loader来处理这些资源，直接引入对应的库即可

vite的底层原理 开启web服务器=>浏览器请求对应资源=>本地服务器编译对应文件=>编译结果返回给浏览器渲染；

在这里我也给大家介绍一下前端黑科技渐进式框架PWA PWA

如果你曾经遇到过以下任何一种情况：

那么你可以从 Webpack 中收益了。它通过让 JavaScript 轻松处理你的依赖关系和加载顺序，而不是通过开发者的大脑。最好的部分是，Webpack 甚至可以纯粹在服务器端运行，这意味着你还可以使用 Webpack 构建渐进增强式网站。

要想了解更多Webpack的信息大家可以看看这个中文文档，可以帮助大家更好的学习。

**推荐文档：**https://webpack.docschina.org/guides/getting-started 对于学习视频来说，我建议大家可以看看尚硅谷的webpack学习视频：

推荐视频：Webpack5入门到原理

推荐书籍：Webpack实战：入门、进阶与调优 (豆瓣) (douban.com)

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成： 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。 Vite的优势： Vite 非常非常快，对比 Vue-cli(基于 Webpack)：

示例代码：Vue3 项目，10个组件

测试两者的 dev 命令运行耗时相差十倍，且理论上，项目越大性能差距越大，为什么呢？最大的原因是 Vite 在开发模式下并没有做太多打包操作！

Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。

而 Vite 运行 Dev 命令后只做了两件事情，一是启动了一个用于承载资源服务的 service；二是使用 esbuild 预构建 npm 依赖包。之后就一直躺着，直到浏览器以 http 方式发来 ESM 规范的模块请求时，Vite 才开始“「按需编译」”被请求的模块。 这里为大家提供一下Vite的官网供大家学习：

**官网文档地址：**https://www.vitejs.net/guide/ 对于Vite的学习大家可以看看千峰教育的陆荣涛的学习视频：

推荐视频：千锋陆荣涛最新前端Vite学习指南 对于前端学习来说陆荣涛老师的教学视频是非常不错的，大家也可以直接搜索陆荣涛老师进行知识的学习。

如果你是一名现代前端，那么恭喜你，你需要了解并使用这么个神器。 如果你还不知道PWA，那么恭喜你，你看到了这篇文章。 Progressive Web Application，全称“渐进式网页应用”，是谷歌主导的一种新时代网页（应用）。 简单的理解，就是你的网页，可以通过某种方式达到离线使用。是不是很神奇，网页可以离线使用，那还叫什么网页（网页，网页，没网还页啥？）。 PWA的学习视频在并不是很多，而且由于并不太难。大家可以在官网上学习：

**官网文档地址：**https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 不过要是官网看文档自学有点困难的话，大家也可以观看B站黑马程序员的PWA学习视频进行了解

推荐视频：PWA-3小时带你实现渐进式WebAPP

前端打包工具在前端学习中的较为重要的，在这里希望大家可以好好的学习这方面的知识，在未来的工作或者求职面试中，它的存在可以帮助各位小伙伴们解决很多的问题，所以在这里希望大家可以认认真真的巩固和学习这一部分的知识。对于前端渐进式框架PWA我在这里不做强求，大家了解即可。

这个阶段我们就可以开始学习前端框架了，这个在企业级开发项目中是极为重要的一个存在。首先我给小伙伴们介绍一下前端三大框架有哪些。 1、angular，一个客户端的JavaScript MVC框架，用于开发动态Web应用程序； 2、vue，一个用于创建用户界面的开源JavaScript框架； 3、react，一个用来构建用户界面的JavaScript库。 目前国内最常用的是Vue其次是React，但是由于Vue3.0的版本和React的JSX语法相似度较高，所以在应聘前端工程师的时候有的单位也会要求应聘者会React。Angular我在这里不为大家做过多介绍，毕竟在国内不是很常用的，在国外较为流行一些。

近几年最火的前端框架当属Vue.js了，Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，相比其它的 MVVM 框架，Vue.js 更容易上手。很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。 **官网文档地址：**https://cn.vuejs.org/ 大家在学习Vue的时候可以看黑马程序员的视频，该视频不仅讲解了Vue2.0版同时也对Vue3.0进行了讲解，实现了一套视频学完Vue。 推荐视频：Vue全套视频教程，从vue2.0到vue3.0一套全覆盖

当然如果有小伙伴们之前对Vue2.0有一定的了解和学习，也可以直接选择Vue3.0的部分就行学习。

推荐书籍：Vue.js设计与实现 (豆瓣) (douban.com)

学完一个技术肯定是要对该技术进行项目实战的，在这里我为小伙伴们的学习采用了Vue2.0项目和Vue3.0的不同版本的项目实战进行学习。有的视频可以会用到node.js大家直接跟着敲了解即可，一般前端的工作是不强求学后端语言的，但是我后面我也会为大家推荐一下这部分的知识供大家学习。

这里我为大家推荐一个较为简单的项目实战，毕竟目前来说前后端的技术栈采用的都是Vue+Spring较为多一点。

Vue2.0的尚硅谷外卖项目实战：硅谷外卖 Vue2.0项目实战 Vue2.x 无人点餐系统实战项目：VUE2.0 实战项目（前端+后端） Vue2.x+Node.js 开发拼多多商城项目实战：Vue2.x 无人点餐系统实战项目

Vue3.0的电商项目实战：vue3.0电商实战项目 Vue3.0的后台项目实战：Vue3.0商店后台管理系统项目实战 Vue3.0+typescript电商项目实战：TypeScript+Vue3.0实战教程｜零基础到电商项目落地实操教程

其实在这里学的好点的小伙伴们可以尝试用Vue2.0的项目做成Vue3.0版本的项目，毕竟Vue3.0的项目并不会像Vue2.0实战项目那么多，而且很多项目都是由2.0改成的3.0，小伙伴们可以自己进行尝试一下啊。

React 是一个 Facebook 和 Instagram 用来创建用户界面的JavaScript 库。很多人认为 React 是 MVC 中的 V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。 **官方文档地址：**http://react-china.org/ 在这里我为各位小伙伴们推荐千锋教育的React全家桶，里面包含了项目实战部分：

推荐视频：千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

推荐书籍：React 学习手册（第二版） (豆瓣) (douban.com)

千锋前端-React项目实战全球新闻发布管理系统：React项目实战全球新闻发布管理系统 react hooks实战移动端企业级项目：react hooks实战移动端企业级项目

学到这里的小伙伴们已经剧本了前端工程师的基本能力，可以去参与工作的应聘和刷面试题或者制作一些简历去应聘工作了。当然，我相信很多小伙伴们对自己的要求更高，所以我在这里继续为小伙伴们推荐一部分，也可以在上班的时候也可以提升自己的技术。 对于我了解的一些前端面试经验在这里给小伙伴们进行总结一下

简历是到公司面试的敲门砖，如果无法通过的第一步简历筛选，就没有后面的事了。 所以简历一定要写好，千万不要出现错别字或者语句不通的地方，特别是别把专业名词写错了。 如果有条件，可以找老师或者同学帮你看看简历，力求第一印象良好。

基础知识一直都是重点考察的内容，包含有HTML（5）、CSS（3）、JavaScript到Vue，React等等所有可能考察的知识。 基础知识不仅仅要知道是什么，更要明白怎么用，为什么这么用。死记硬背能应付一时，如果你遇到了想深入聊聊的面试官，死记硬背就没用了。所以每个知识点都要理解透彻，讲的清楚。 每次面试都要提前做好准备，下面是一些常考的面试知识点，大家可以提前准备 HTML(5)： 1）H5的新特性有哪些？ 2）Label的作用是什么？是怎么用的？ 3）HTML5的form如何关闭自动完成功能 4）实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果 5）title与h1的区别、b与strong的区别、i与em的区别？ 6）每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 7）img的alt与title有何异同？ strong与em的异同？ 8）简述一下src与href的区别？ 9）知道的网页制作会用到的图片格式有哪些？ 10）你如何理解HTML结构的语义化？ 11）html5有哪些新特性、移除了那些元素？ 12）如何处理HTML5新标签的浏览器兼容问题 13）… CSS: 1）css盒模型 （1）css盒模型基本概念？ （2）标准模型和IE模型的区别：计算高度和宽度的不同，怎么不同，高度宽度是怎么计算的？ （3）js如何设置获取盒模型对应的宽和高？ （4）… 2）BFC（边距重叠解决方案） （1）BFC的基本概念？ （2）BFC原理/ BFC渲染规则？ （3）如何创建BFC？ （4）BFC的使用场景？ 3）css浮动 （1）css浮动原理？ （2）浮动元素引起的问题？ （3）css清除浮动的方法？ 4）css经典布局 （1）三栏布局：左右各300px,中间自适应？ （2）圣杯布局 （3）双飞翼布局 （4）css水平、垂直居中的写法，请至少写出4种？ 5）css兼容 （1）经常遇到的css兼容性的问题在哪些？如何解决的？ 6）css hack （1）什么是CSS hack？ （2）CSS hack的原理？ （3）CSS hack分类？ （4）CSS hack书写顺序？ 7）… JavaScript： 1）原型链 （1）创建对象有几种方法？ （2）instanceof的原理？ 2）类 （1）类的声明？ （2）,生成实例？声明一个类，怎么生成类的实例？ 3）继承 （1）call、apply的共同点与区别? （2）用javascript实现对象的继承/ 继承的几种方式，这几种方式的优缺点? 4）作用域 （1）说说你对作用域链的理解？ （2）this？ （3）… 5）闭包 （1）闭包的特征？ （2）闭包应用场景？ （3）实际开发中闭包的应用？ （4）… 6）运行机制/ 单线程/ 异步 （1）如何理解js的单线程？ （2）js为什么是单线程的？ （3）同步和异步的区别是什么？分别举一个同步和异步的例子？ （4）何时需要异步？ （5）什么是任务队列？ （6）栈和队列的区别？ （7）栈和堆的区别？ （8）… 7）数据类型 （1）js使用typeof能得到的哪些类型？ （2）如何准确判断一个变量是数组类型？ （3）js变量按照存储方式区分为哪些类型，并描述其特点？ （4）null和undefined的区别？ （5）undefined的典型用法？ （6）null的典型用法？ （7）… 8）内置函数/内置对象 （1）js中有哪些内置函数/ 数据封装类对象？ （2）js中有哪些内置对象？ （3）js变量按照存储方式区分为哪些类型，并描述其特点？ （4）字符串方法/ String对象方法? （5）数组方法/ Array对象方法？ （6）… 9）数组去重 （1）数组怎么去重？（方法） （2）对上述数组去重方法速度比较？（性能） （3）一句话数组去重？ （4）保留数组中非重复元素？ 10）逻辑判断 11）内存泄漏 （1）哪些操作会造成内存泄漏？ （2）js内存泄漏的解决方式 12）dom （1）dom是哪种基本的数据结构？ （2）dom操作的常用api有哪些？ （3）dom节点的attribute和property有何区别？ （4）dom结构操作/ 怎样添加、移除、移动、复制、创建和查找节点/ dom操作的 （5）常用api？ （6）dom事件的级别？ （7）dom事件模型？ （8）dom事件流？ （9）… 13）通信 （1）什么是同源策略及限制？ （2）前后端如何通信？ （3）跨域通信的几种方式？ （4）… 14）ajax （1）ajax请求的原理，手写一个ajax请求？ （2）readyState？ （3）ajax异步与同步的区别？ （4）… 15）… Vue: 1）vue-cli工程 （1）构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？ （2）vue-cli 工程常用的 npm 命令有哪些？ （3）请说出vue-cli工程中每个文件夹和文件的用处 （4）config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置 （5）请你详细介绍一些 package.json 里面的配置 2）vue核心知识点 （1）对于Vue是一套渐进式框架的理解 （2）vue.js的两个核心是什么？ （3）请问 v-if 和 v-show 有什么区别 （4）vue常用的修饰符 （5）v-on可以监听多个方法吗？ （6）vue中 key 值的作用 （7）vue事件中如何使用event对象？ （8）$nextTick的使用 （9）Vue 组件中 data 为什么必须是函数 （10）v-for 与 v-if 的优先级 （11）vue中子组件调用父组件的方法 （12）vue中 keep-alive 组件的作用 （13）什么是vue生命周期？ （14）vue生命周期钩子函数有哪些？ （15）vue如何监听键盘事件中的按键？ （16）vue更新数组时触发视图更新的方法 （17）解决非工程化项目初始化页面闪动问题 （18）v-model语法糖的组件中的使用 （19）… 3）vue-router （1）vue-router如何响应 路由参数 的变化？ （2）完整的 vue-router 导航解析流程 （3）vue-router有哪几种导航钩子（ 导航守卫 ）？ （4）vue-router传递参数的几种方式 （5）… 4）vuex （1）什么是vuex？ （2）使用vuex的核心概念 （3）vuex在vue-cli中的使用 （4）在vue中使用vuex，修改state的值 （5）… 5）http请求 （1）Promise对象是什么？ （2）axios、fetch与ajax有什么区别？ （3）… 6）UI样式 （1） .vue组件的scoped属性 的作用 （2）如何让CSS只在当前组件中起作用？ （3）vue中常用的UI组件库 （4）如何适配移动端？【 经典 】 （5）… 7）MVVM设计模式 （1）MVC、MVP与MVVM模式 （2）MVP （3）MVVM的实现原理 （4）Object.defineProperty()方法 （5）… 8）… React 1）基本知识 （1）什么是React？ （2）React有什么特点？ （3）列出React的一些主要优点。 （4）React有哪些限制？ （5）什么是JSX？ （6）… 2）React 组件 （1）你理解“在React中，一切都是组件”这句话。 （2）解释 React 中 render() 的目的。 （3）如何将两个或多个组件嵌入到一个组件中？ （4） React中的状态是什么？它是如何使用的？ （5）区分状态和 props （6）如何更新组件的状态？ （7）React 中的箭头函数是什么？怎么用？ （8）区分有状态和无状态组件。 （9）React组件生命周期的阶段是什么？ （10）详细解释 React 组件的生命周期方法。 （11）React中的事件是什么？ （12）如何在React中创建一个事件？ （13）React中的合成事件是什么？ （14）你对 React 的 refs 有什么了解？ （15）… 3）React Redux （1）MVC框架的主要问题是什么？ （2） 解释一下 Flux （3）什么是Redux？ （4）Redux遵循的三个原则是什么？ （5）列出 Redux 的组件 （6）… 4）React 路由 （1）什么是React 路由？ （2）为什么React Router v4中使用 switch 关键字 ？ （3）为什么需要 React 中的路由？ （4）…

面试中，项目经验非常重要，是作为能力评估的重要参考标准。对于基础知识的面试，项目经验面试更要考察你的实际开发能力，需要能讲出自己的实战理解和给出具体的实现方案。 一般都会问到一些技术上的实现技巧，可能会让你用代码来实现，一般说清楚思路就可以了，也可以写伪代码来体现。一般能表述清楚，评价不会太低。 会考察的问题包括但不限于： 项目开发流程、技术架构、说说做的比较好的项目、你在项目中担任的角色、项目中的收获、项目两点、项目中遇到的难点、简历中罗列的技术栈你是怎么理解的，如果让你运用实现你怎么做、组件设计和实现、兼容性问题、底层原理、性能优化、工程化、前端学习规划、算法

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

在这里大家可以看看这篇文章背一下常见的面试题目：

**推荐文章：**https://www.cnblogs.com/zheroXH/p/11578738.html

提问：前端开发需要学数据库吗？ 不需要，写写页面要什么数据库。这是初级前端开发的工作，对于初级前端开发学习数据库是没必要的 但是往中高级发展，是必然需要了解数据库的，常见的就是在 各大公司的招聘信息中就有要求。 所以在这里我为大家推荐两个种数据库，一个是关系型数据库MySQL和非关系型数据库Mongodb。 什么是关系型数据库？ 关系型数据库是指采用了关系模型来组织数据的数据库。简单来说，关系模式就是二维表格模型。 主要代表：SQL Server，Oracle,Mysql,PostgreSQL。 优点： （1）.容易理解，二维表的结构非常贴近现实世界，二维表格，容易理解。

（2）使用方便，通用的sql语句使得操作关系型数据库非常方便。

（3）易于维护，数据库的ACID属性，大大降低了数据冗余和数据不一致的概率。

瓶颈

(1 )海量数据的读写效率。

对于网站的并发量高，往往达到每秒上万次的请求，对于传统关系型数据库来说，硬盘I/o是一个很大的挑战。

(2) 高扩展性和可用性。

在基于web的结构中，数据库是最难以横向拓展的，当一个应用系统的用户量和访问量与日俱增的时候，数据库没有办法像web Server那样简单的通过添加更多的硬件和服务节点来拓展性能和负载能力。 什么是非关系型数据库？ NoSQL非关系型数据库，主要指那些非关系型的、分布式的，且一般不保证ACID的数据存储系统，主要代表MongoDB，Redis、CouchDB。 NoSQL提出了另一种理念，以键值来存储，且结构不稳定，每一个元组都可以有不一样的字段，这种就不会局限于固定的结构，可以减少一些时间和空间的开销。使用这种方式，为了获取用户的不同信息，不需要像关系型数据库中，需要进行多表查询。仅仅需要根据key来取出对应的value值即可。 优点： 非关系数据库大部分是开源的，实现比较简单，大都是针对一些特性的应用需求出现的。根据结构化方法和应用场景的不同，分为以下几类。 （1）面向高性能并发读写的key-value数据库 主要特点是具有极高的并发读写性能，例如Redis、Tokyo Cabint等。 （2）面向海量数据访问的面向文档数据库 特点是，可以在海量的数据库快速的查询数据。例如MongoDB以及CouchDB. （3）面向可拓展的分布式数据库 解决的主要问题是传统数据库的扩展性上的缺陷。 缺点： 但是由于Nosql约束少，所以也不能够像sql那样提供where字段属性的查询。因此适合存储较为简单的数据。有一些不能够持久化数据，所以需要和关系型数据库结合。

MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似json的bson格式，因此可以存储比较复杂的数据类型。Mongo最大的特点是它支持的查询语言非常强大，其语法有点类似于面向对象的查询语言，几乎可以实现类似关系数据库单表查询的绝大部分功能，而且还支持对数据建立索引。 对于学习视频，各位小伙伴们可以看一下黑马的mongodb视频：

推荐视频：MongoDB基础入门到高级进阶 这部分视频中有讲解到SpringData的连接，这一部分大家不需要观看了解即可，我们目前只需要了解node.js和mongodb的连接即可。 mongodb的官方文档：

**官方文档地址：**https://www.mongodb.org.cn/

MySQL 是最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的 RDBMS关系数据库管理系统应用软件之一。 MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。 MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL 软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型和大型网站的开发都选择 MySQL 作为网站数据库。 关于学习视频小伙伴们可以去看看尚硅谷的MySQL学习视频：

推荐视频：MySQL_基础+高级篇 里面讲解了6大范式讲解、7大日志剖析、7大SQL性能分析工具、9大存储引擎剖析、10大类30小类优化场景、15个不同锁的应用讲解、18种创建索引的规则…… 当然如果有小伙伴们想快速上手的话，可以看看黑马程序员的MySQL学习视频：

推荐视频：MySQL数据库入门到精通，从mysql安装到mysql高级、mysql优化全囊括 个人觉得黑马程序员讲解的视频并没有尚硅谷讲解的那么细致，还是推荐小伙伴们去看看尚硅谷的。 **MySQL官方文档：**https://www.mysqlzh.com/

Nodejs 是基于 Chrome 的 V8 引擎开发的一个 C++ 程序，目的是提供一个 JS 的运行环境。最早 Nodejs 主要是安装在服务器上，辅助大家用 JS 开发高性能服务器代码，但是后来 Nodejs 在前端也大放异彩，带来了 Web 前端开发的革命。Nodejs 下运行 JS 代码有两种方式，一种是在 Node.js 的交互环境下运行，另外一种是把代码写入文件中，然后用 node 命令执行文件代码。Nodejs 跟浏览器是不同的环境，写 JS 代码的时候要注意这些差异。最后，我们介绍了 npm ，通过 npm 装包的方式，开发中我们再也不用重造轮子了。 正是因为有Node.js的存在，让我们前端工程师也可以做后端才能做的事情，虽然不会像Java后端那样可以完成很多复杂的任务，但是也可以解决不少的问题。 学习视频我推荐大家看黑马程序员的：

推荐视频：Node.js全套入门教程 里面有关于Node.js和MySQL数据库连接的教程，也讲解了如何解决跨域的问题，主要用到的框架是Node.js的express。 也可以看看千锋教育出的视频：

推荐视频：千锋前端Node.JS教程,快速入门nodejs全套完整版 里面用的框架是Node.js的koa2，也是在Node.js开发中非常流行的框架之一。

这里也为各位小伙伴们推荐一个Node.js+MongoDB的学习视频：

推荐视频：node+MongoDB

小伙伴们可以根据这个视频来了解Node.js是如何操作MongoDB的。

**node.js的中文文档：**http://nodejs.cn/

学习视频：Express框架全栈开发系列课程 项目实战：前后端交互 项目实战 Node+Ajax+Express

学习视频：Koa2免费视频教程 项目实战：Node+Koa2从零搭建通用API服务

本阶段我们将会介绍一下服务端渲染。 首先什么是浏览器端渲染 (CSR)？ CSR是Client Side Render简称；页面上的内容是我们加载的js文件渲染出来的，js文件运行在浏览器上面，服务端只返回一个html模板。 那什么是服务端渲染？ SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。 总而言之就是将动态页面的内容生成静态页面可以帮助搜索引擎更好的搜索出我们网站内容的符合度。当用户搜索某个内容时候，如果你网站就是为该主题的内容，搜索引擎会根据你网站的符合程度进行排名最后在用户搜索结果进行展示。所以说服务端渲染可以更好的帮助和提高我们网站的曝光度的。

Nuxt.js是一个基于Vue.js的通用应用框架。主要关注的是应用的UI渲染。 Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。 我们都知道Vue.js原来是开发SPA(单页应用)的，现在很多人想用Vue开发多页应用，并想要在服务端完成渲染。Nuxt.js应运而生，她简化了SSR的开发难度，而且还可以直接用命令把我们制作的vue项目生成静态html。 Nuxt.js由于不是很难，所以非常好上手。在这里我推荐大家可以进入官网自行学习。 **官方文档地址：**https://zh.nuxtjs.org/guide/ 当然，如果还是有小伙伴们觉得用官网自学比较困难，那也可以参考一下技术胖的Nuxt.js的学习教程：

推荐视频：Nuxt.js免费视频教程 开启SSR渲染 但是这个视频可以帮助大家很好的入门，如果想了解更多还是建议各位小伙伴们去看看官网学习。

Next.js是一套基于React的服务器端渲染框架。在React模块化的基础上，带来以下几点好处：

总之一句话：保持强大的同时更好用！ 在这里给小伙伴们上一个next.js的中文文档，有需要的小伙伴们可以根据官方文档自学。 **官方文档：**https://www.nextjs.cn/ B站视频的话，各位小伙伴们可以看看技术胖的Next.js的学习视频。

推荐视频：Next.js的学习视频

这个阶段我们将来到移动端开发阶段，我们只要会学习到微信小程序、uniapp和react native等移动端项目的开发。

微信小程序是以微信为运行环境的一种应用，其实质是 Hybrid 技术的应用，Hybrid App 即混合模式移动应用，因此与 H5 类似，但又比 H5 拥有很多原生的能力，例如调用位置信息和摄像头等。小程序的开发方式与 H5 十分相似，用的也是 JavaScript、HTML、CSS 语言。 由于开发微信小程序需要有AppId和一些验证等操作，在这里各位小伙伴们可以看看这篇文档，对大家前期学习微信小程序提供更多准备和帮助：

**学习官网：**https://www.w3cschool.cn/weixinapp/9wou1q8j.html 微信小程序由于是腾讯出的，所以它的文档对于国内开发者来说非常的友好，我还是建议有能力的小伙伴们可以根据文档自学学习 **官方文档地址：**https://developers.weixin.qq.com/miniprogram/dev/framework/ 当然，大家也可以在B站上看一下黑马程序员的微信小程序开发。 推荐视频：前端微信小程序开发教程 该视频包含了微信小程序的学习和项目实战以及如何发布到uniapp上面，可以说是非常的详细了。 微信小程序还有两个细节是需要大家了解的 大家可以直接点击链接过去，这些文章对大家解决这些问题是非常有用的。

推荐文章：[第一个是如何引入echart.js](https://blog.csdn.net/qq_44170622/article/details/107709236#:~:text=微信小程序引入 echars 一、 引入 echars 第一步，下载 GitHub 上的,id%3D"mychart" canvas-id%3D"mychart-bar" ec%3D" { { ec }}">