# 关于我
入门前端在去年中旬时就有打算，但直到今年年初 10 号放寒假时才抽出时间开始正式学习，很感谢偶然间看到的 b 站 up 风情_岂止万种 的这篇贴子 (https://b23.tv/5ao9Htl)，一篇很普通的踩坑成长贴却实在的给了我很多鼓励与建议，让我在那时能够清晰的找到方向。因此如今入坑前端 7 个多月的我也决定分享一下自己的成长经历，希望可以帮到更多的人，也感谢 b 站其他许多 up 分享的学习路线让我逐渐清晰前端的整体学习架构，不断成长。
更加感谢百度前端团队的指导，让我能够在入职时从一个知识还不够巩固的前端菜鸟成长为一个知识稍微巩固些的前端菜鸟😆
# 前端 or 后端
如果你喜欢写页面，跟产品计较技术难实现，跟设计美工比划比划，跟后端吵数据交互接口问题，跟测试阿巴阿巴，那我十分推荐你从事前端，如果你喜欢跟数据打交道，那就去后端吧
前端的知识比起后端不算庞大，但都找不到上限，前端的东西还在不断更新迭代，也就是说适合高强度学习的人，做好现在学的东西在不久的未来被淘汰的心理准备，并持续学习，而后端的东西趋于稳定，虽然也有新东西冒出来，但能把主流的东西学完，基本上薪资也就稳定在那里了
# 路线及建议
我从入坑到入职用了 3 个月的时间，从 1.10 号到 4.8 号（刚好次日是我的生日 hhh），基本上保持每天 10 小时以上的高强度学习 (依稀记得除夕夜那晚还有 30 位哥们跟我一起看 vue 的视频)，我也希望你也有狠下去完成我这一份学习路线攻略的决心。
学习攻略是我的真实学习经历并不断优化提炼而成的，希望能给你带来帮助。
# 阶段一 三大件（一个月）
# HTML、CSS/SCSS (一周)
这一部分推荐看 b 站渡一成哥那个视频入门（成哥非常有意思，当时看的很开心），并且最后会顺带做一个淘宝的静态网页，大概一周的时间可以学完，如果学的快一周时间还有剩的话可以去百度前端这个网站 (http://ife.baidu.com/) 看一看，里面有很多手写任务，也有 CSS3 的知识可以学习，如果时间比较紧张的话，可以直接去掘金找一篇 CSS3 概念总结快速浏览了解，HTML5 的内容也可以大致了解一下。不太建议看黑马程序员之类的视频，有点太拖节奏。另外推荐花 1 小时时间在掘金找篇文章学习一下 SCSS，作为 CSS 预处理语言，可以理解为他的超集，主要用到嵌套语法和定义变量提高复用性，大大减轻写 CSS 时的负担
# JavaScript、TypeScript（一周）
JavaScript 包括 ECMAScript 和 Web/Node，web 是指浏览器环境，node 是后端环境，不同环境对应的 api 不同，webAPI 包括 BOM 和 DOM、AJAX 等，node 则是类似 java 的 jvm，可以使 js 支持与操作系统对话，完成读写电脑文件等操作，配合框架可以轻松搭建 web 服务器。
这一部分同样是推荐观看渡一成哥的视频学习，最后那个贪吃蛇可以跟着做一下，我关于面向对象思想的理解是从这里开始的（学 java 时都不太明白），学完后补充学习 es6 和 AJAX（Web 中的一块思想，是前后端分离的核心，主要实现是 XMLHttpRequest 对象，有基于此用 promise 封装的库 axios），同样是可以去掘金找一篇贴子大概看一看，或是看阮一峰的 es6 教程，有视频（b 站搜）和文档 (https://wangdoc.com/es6/) 学习异步编程 promise、async/await，模块化，还有 let、const，模板字符串、扩展运算符等新东西。另外可以抽 1-2 小时时间学习一下 TypeScript (掘金上有篇 1.9w 字攻略的写的十分不错，链接在下边)，主要功能是提供类型校验和代码提示的功能，主要项目用在对接口返回的数据进行校验，方便使用（第一次感觉报错是如此美妙的东西）。
https://juejin.cn/post/7068081327857205261
这一部分可能花 10 天或两周的时间，可以跟学框架的时间协调一下，或是时间充裕可以多花点时间
# javascript 框架和项目（两周）
这一部分推荐观看尚硅谷张天禹老师的 vue 视频，里面包括了 vue2 和 vue3，讲的非常不错，观看的同时推荐结合官方文档来阅读，vue 推出的新官方文档我看了一遍，写的非常好，地址在上方技术栈框架栏。框架知识过完一遍之后，推荐继续跟着做一个 vue 项目，尚硅谷有个最新的 vue 商城项目非常不错，涉及前台和后台（虽然我只做了前台，还没做完。。。），如果时间够的话可以跟着做完，并且记录自己用到的东西。
# 阶段二 工程化项目（一个月）
一个月的时间搞定三大件可能头还是晕晕的，所以我们需要在忘掉这一个月爆肝的东西之前再做一次项目巩固。我的当时项目主要是花了 800 块报了一个项目组来进行协作的，感觉还不错，一开始小组打卡学习，然后花两周时间来做一个项目，当时做了一个小论坛，虽然没做完马马虎虎上线，但还是学习到很多，特别是自己实现的项目而不是跟着敲。
# 工具链（一周）
这一部分需要学习前端开发常用的工具链
首先是 npm、yarn、pnpm 为首的包管理器，三者会一个其他都基本能轻松掌握，推荐最新的 pnpm 作为主要包管理器，在前面学框架时也有一个基本的认识了。然后是 webpack 和 vite 为主流的打包构建工具，之前用的脚手架就是基于此，可以自己跟着做一个脚手架（掘金搜）
然后是交付用的 git，团队管理代码平台，可以通过下面两个贴子学习
https://blog.csdn.net/m0_46548070/article/details/105116420?spm=1001.2014.3001.5506
https://juejin.cn/post/6844903598522908686
代码主要提交的 github、gitee 和 gitlab 三个平台，github 我用的比较多，缺点是需要挂加速器，但是资源非常多非常好玩，gitee 是国内的平台，我基本没用过，看个人喜欢，gitlab 是公司的代码仓库，CI/CD 非常友好
git 使用可以结合这个网站进行实操练习理解
https://learngitbranching.js.org/?locale=zh_CN
实际使用 git 大部分情况都是使用可视化工具来进行操作，我是直接使用 vscode 内置的 git 和 gitLens 和 gitHistory 扩展来进行代码管理，缺少的部分功能则直接用代码实现
# 项目实战与复习（三周）
这个阶段需要你找到一个小组项目，最好是 1-2 个前端和几个后端来进行 立项定需求->开发->测试->上线 的简单企业流程开发，然后需要不断回顾复习之前学到的东西，不断翻看笔记和内容，记录开发时遇到的难题，作为之后面试的内容
# 阶段三 背八股文、刷题、面试与复盘（一个月）
到这一阶段，恭喜你可以暂时放松一下了，然后收拾心情准备冲刺
# 网络与浏览器（一周）
这里推荐看《图解 HTTP》和《小林 coding 的图解 http》，并且开始背诵一些常见的八股文，八股文可以直接在 github 中搜索面试相关或者直接去牛客刷题，然后是浏览器的相关也可以在掘金等地方找到。
后续深入推荐看《自顶向下的计算机网络》，加薪必备
# 数据结构与算法（一周以上，越久越好）
数据结构 + 算法 = 程序，这一部分是程序员实力的体现，虽然前端并不需要很强的数据处理功底，但如果要冲大厂的话这一部分绝对是越强越好，推荐刷《代码随想录》，直接搜，还有力扣上的《剑指 offer》。
大厂还喜欢面 javascript 的手写题来考察对 javascript 的理解与 coding 能力（当初面字节的时候吃了大亏），我的刷题日记中有 60 道积累的手写题可以参考学习练习，记得给个 star！！！
https://github.com/EvilMoOd/LeetCode
# 面试与复盘
再看看三大件、工具链和性能优化相关的八股文就可以去面试了，当然也可以先投，边背边面
简历的制作可以参考 b 站一些面试 up 面试视频中的简历，然后就是在实习僧，boss 等地方投，大厂推荐直接找内推或去官网，不断面试复盘，从小厂开始面，然后去大厂，安排好时间，期间不断背诵八股文与巩固知识。
# 持续学习
- 推荐学习 react，如果 vue 能找到 50% 的前端工作，那 react 就能找到剩下 50% 中的 40%。我是入职后花几天时间学习和掌握 react 的，面试期间也有看相关的视频，但教的很一般，推荐直接看文档通过 vue 类比学习。react 的新文档还没出，老文档和 b 站许多视频都多多少少扯到类组件，类组件已经过时了，就好像 vue2 逐渐被 vue3 取代一样，所以强烈不推荐学习类组件相关的概念（生命周期可以稍微看一下），直接学函数组件。现在的前端框架核心主要是 vue 的 template+compositionAPI 和 react 的 jsx+hook，两者思想其实是一样的，会其中一个，另一个通过对照文档功能学习也能很快掌握，如 vue 中的 watch 在 react 中是什么 api。生命周期又是哪个 api
- html5 方面可以对 canvas 和 svg 进行一些实践和了解
- css 推荐观看《CSS 揭秘》或是各类 CSS 的实践代码，也可以去 codepen 上看看大佬们做的多姿多彩的页面
- javascript 基础可以在看看《javascript 高级程序设计》，也就是红宝书，还有《现代 javascript》(https://zh.javascript.info/) 这个网站电子书进行查漏补缺，当然推荐后者更多一些，写的真的好。进阶方面可以看《javascript 忍者秘籍》和《你不知道的 javascript》
- 推荐学习 node 做一个小全栈程序员
- 可以看看移动端的实现，如 uniapp，reactnative、flutter 等，uniapp 还可以用来跨端写小程序和 app，更推荐学习。
- 然后是库的积累，不断看 github 积累经验，或是发现一些好玩的新技术，掘金也是不错的地方，如果有问题的话，可以直接在 stack overflow 搜索提问，或是在 MDN 上搜索相关 api 的介绍说明。
- 可以自己尝试写一些库，积累项目常用的如组件库、hook、函数库等，多关注 vscode 的更新，不断熟悉你的编辑器，调教好它可以让你的编码如虎添翼，另外可以通过 eslint 和 style lint、prettier 来规范美化你的代码，或是团队的代码。
- 性能优化要有自己的归纳和理解
- 微前端也可以了解一下
- 当然前端领域不止有这些，更深的还有视频、图像处理等方向，在不断深入学习的过程中不妨，自己写一个博客将自己学到的东西记录下来并分享出去
# 最后
学习攻略虽然是以教学的口吻来写的，但其实大多都是我真实的自学经历，是我在学习的过程中不断地查阅各种学习路线来对前端整体框架进行梳理和填补，难免会有一些学的早，有些学的晚，所以进行了一些优化提炼、顺序编排。希望大家学习愉快，秋招 / 春招顺利，找到自己满意的工作或实习。
附技术栈
