2024年零基础前端学习路线（本人亲身经历，9个月拿到拼多多、美团、京东校招offer，5000字长文(1)

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

结论：VSCode

最初我选择的是Hbuilder，轻量级，界面淡黄色和绿色结合比较护眼，但是插件较少，格式化代码以及快捷键用着不是特别顺手，转而使用VSCode。

个人认识业界使用比较多的两种编辑器，VSCode 和 WebStorm。

具体的对比请移步VSCode 与 WebStorm 横向对比

个人想法，其实真没必要对于编辑器过于纠结，毕竟只是一个工具，大佬用txt都可以编写代码，在前期学习阶段可以选定一个坚持使用，等到学有所成，对于编辑器有着个人更独特的要求再去选择更适合自己的编辑器。

HTML

学习资料：绿叶学习网 HTML入门教程 以及 《零基础入门学习Web开发》（HTML5&CSS3）（小甲鱼）

HTML的入门知识可以在 绿叶学习网 HTML入门教程 上通读一遍，保证对于html元素标签有一个大概的认识。

不用太刻意去记，这些元素都会在今后的实践中不断加深印象，刻意去背消耗过多的时间并且挫伤积极性，但是阅读的同时自己跟着教程在编辑器里敲一下代码，既能加深记忆，又可以从中获得成就感。

HTML5先学习一下语义化标签，然后了解存储方式的区别，canvas和音视频可以留到之后有需要再深入学习。

CSS

学习资料：绿叶学习网 CSS入门教程 以及 绿叶学习网 CSS3入门教程

CSS的入门知识也可以在 绿叶学习网 CSS入门教程 以及 绿叶学习网 CSS3入门教程 上通读一遍，保证对于CSS样式有一个大概的认识，也是不用刻意去记，道理同上。

静态页面

学习步骤：freeCodeCamp => pink老师的品优购电商项目

freeCodeCamp 可以加深HTML和CSS的记忆，相当于对于之前的学习的一个阶段性复习，个人的学习建议是学习响应式WEB设计（除响应式 Web 设计原则）的内容。

个人尝试去做的静态页面还有pink老师的品优购电商项目，基本完成这个页面就可以进行JavaScript的学习

JavaScript

**学习步骤：绿叶学习网 JavaScript入门教程 =>

ECMAScript 6 入门教程 ---- 阮一峰 =>

《JavaScript高级程序设计》第四版**

结论放在最前，先学习绿叶学习网的JavaScript入门教程，再学习ES6几个常用的新特性，就可以继续之后框架板块的学习。

对于ES6没有详细阅读的部分以及JavaScript红宝书，可以在之后有一定了解再深入学习。

JavaScript绝对是前端的灵魂所在，是前端工程师的基础所在，值得在职业生涯中一直保持深入学习。

假如你有其他编程语言的基础，那么绿叶学习网只是作为你对于JavaScript这门语言的引路人，简单过一遍就能对于这个相对直观的编程语言有一个基本了解。

假如你之前没有其他编程语言基础，那么请伴随着百度搜索仔细阅读咀嚼自己不能理解的部分，打好JavaScript的基础对于今后的学习有着很大的帮助。

ES6是一个很庞大的板块，可以不用全篇精读，主要了解一下，变量的解构赋值，变量声明，箭头函数，欢迎来看看我的另一篇博客 —— ES6你不得不知道的新特性，这是对于今后观看其他视频学习前端会高频提到的几个ES6新特性，不知道会影响之后的学习。

《JavaScript高级程序设计》第四版，这是最新最权威的学习书籍，但是由于其厚重性，我并不建议一上手就阅读它，很容易被劝退。但是不可否认，它作为最全面最官方的解读，能让你对于JavaScript这门语言获得最精准的理解。我的建议是作为字典类辅助书籍，有空的时候可以翻翻深入巩固自己的JavaScript基础，没空的时候先不做强制阅读。在今后的学习中，如果遇到在网上无法求解的疑惑的时候可以尝试在其中寻找答案。

三大主流框架

---

以下是三大主流框架，我个人的选择是VUE，所以对于VUE的学习路径会相对详细些，关于每个框架的优缺点网上测评的有很多，感兴趣的朋友可以去搜搜看。

个人的一些拙见：

• Angular个人是不建议初学者上手学习，使用的人数基数小，不容易找到实习；

• REACT适合JavaScript基础比较扎实的人，由于生态很好，构建项目技术选型更像一个开放题，遇到问题也有很多的解决方案，很多大厂都在使用。

• VUE在中国受众更广，门槛低，由于开发者尤雨溪是中国人，因此中文版文档阅读起来更为轻松，也有大厂在使用，比如美团和阿里。

总而言之，VUE更容易，REACT相对自由度更高，效果更好。

VUE

学习资料：4个小时带你快速入门vue => 2019年最全最新Vue、Vue.js教程，从入门到精通 => VUE源码阅读

这里搬运一下尤大大的 官方文档 和 Github仓库 ，阅读文档的必要性还是很大的，至少我博客中vue-router很大程度都是阅读官方文档总结出来的。

第一个视频能够带你入门VUE，几个小demo自己动手试试能进一步加深印象。

第二个视频则是我认为最佳的VUE教程，由浅入深的讲解VUE，至于视频后期的项目，可以辩证选择，我觉得电商没啥意思，所以我找了一些其他自己感兴趣的项目去做，不过此时一定要做项目实践巩固一下这段时间VUE框架的学习。

学完以上两个视频就可以开始准备实习的投递，但是由于对于原理的理解不够和JavaScript的基础不扎实，所以大厂的实习通过的难度不小，所以可以在刷面试题的同时阅读VUE源码，能够应对大多VUE的面试题，就算没有询问到这方面的问题，自己提及也可以作为自己面试的闪光点。

REACT

学习资料：React学习路线----技术胖

我是因为拼多多是使用REACT技术栈才开始学习REACT，也是今年（2020年）11月刚刚起步，我觉得技术胖的学习路线很不错，内容也很新，大家可以批判借鉴。

还有一个视频我觉得也很适合初学者快速上手，大家有兴趣也可以批判借鉴。最全的react视频【黑马程序员】

不过，我觉得技术胖的实战项目更多立足于UI本身，而不是立足于处理数据交互，因此我并不打算尝试，而是选择打算尝试神三元的掘金小册，具体效果要等我尝试之后才可以确认。

React Hooks 与 Immutable 数据流实战

Angular

我也没学过，我也不知道，嘿嘿嘿～

不过美团的一面面试官好像就是用Angular，他们现在移植Angular项目转为VUE，假如有朋友有很好的学习资源欢迎分享！

精耕深研

---

学习了以上内容，假如是学生找实习，就可以开始主动刷一下笔试题、面试题，去尝试投递实习。

面试题欢迎转战我的其他博客

2020最全前端面试系列

小程序

学习资料：微信开放文档

假如有VUE的基础，学习小程序还是很容易上手的，我这里推荐是直接阅读微信官方文档API就可以实现构建一个小程序。

不过我还是搬运了VUE教程导师的小程序教程，具体效果由于我也没有听完就不妄作评价了。

2019年7月最新小程序开发教程

Node

JavaScript的后端编程，我也不是很会，中文版官方文档写得不太容易阅读，我观看了两个视频，但是觉得效果一般，并且自身没有实践，掌握十分不牢固。欢迎大佬分享提供Node学习资料！在这里只是简单做一个搬运。

基础系列：轻松学node.js系列(实战系列前篇,全18讲)

偏实战系列：Node.JS-黑马程序员

jQuery

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux