web前端自学路线和建议

前言

我在大学的时候学的是java，但是因为复杂和麻烦选择了自学前端（前端更麻烦），学习了近1年多（5个月的时候就在面试找工作了），从最基础的前端三剑客学到三足鼎立的框架，再进入nodeJs、uniapp、小程序、云开发的进阶。我把我的学习路线和方法分享给大家。

自学前先考虑的问题

1. 我具体走前端还是后端？

• 不走全栈：很多人都想走全栈，这是一个最最大的错误，没说全栈不好，但是如果你以一个0基础或者基础薄弱的人去走这条路，那会付出惨痛的代价。（全栈就是，全都会全不精通）

• 后端：后端适合重逻辑，逻辑思维强的同学，技术难度相对是要比前端深的。比如java，在学习这门语言就有很高的难度

• 前端：前端也不是很轻松，知识的广度远超后端，虽然你只会网页开发就能够找到工作，但是想往上爬，还是远远不够，学到后面，你会发现自己所用的在所要学的的面前完全就是小儿科

• 据我了解，现在大前端，前端的缺口会大于后端的，而且做小程序和做网页任意切换，就代表了学的多，用的也多。

2. 选择培训还是自学？

• 首先，在资金允许的情况下，我支持参与培训，毕竟有学习氛围和老师指导。

• 如果你自觉性很弱或者对前端不是太热爱还是建议你报培训班，毕竟花钱了，应该会珍惜一点。

如果以上都不满足，那么你可以选择自学，那就继续看下面的内容。。。

3. 我现在已经大四或者已经上班，还适合自学嘛？

我只能说只要你愿意，前端什么时候都可以学，毕竟入门快。我一个认识的朋友是做客服工作的，每天上班看文档，还是花了一年把vue、react学会。还有位置朋友是毕业学修电脑的，自学了5个月前端要的7k。

自学好习惯

1. 看完视频自己按照视频敲一遍（最好不要借助视频），不要图快，一步一个脚印。当然，但是如果你和我一样懒，不想敲，那就要付出加倍的时间去看视频。

2. 不要一味追求新知识，在学习新的前，先回顾一下以前的知识。

3. 每学完一门技术，就写一个项目，比如学完css、html就可以仿一个淘宝的首页

4. 如果真的看不懂，那就先往后看，看完再返回来看，不要因为一个知识而卡住，因为有可能答案就在后面。

5. 学习要专一，不要看到什么好玩的就去学什么，（血的教训，我看到web安全好玩装逼，花了2个月学，结果用到的地方少之又少，收益不对等）

自学流程

最好不要根据培训机构的线路自学，因为那是培训用的，很多知识不适合自学，没有人带你会觉得很困难。

我只介绍最快入门的方式，如果你想增加你知识的宽度，可以多看看帖子和一些流行框架

1. HTML、CSS、初级JS的使用

• 在学习HTML的时候不建议花时间去学HTML5的一些新标签（header、nav），首先兼容性不高，也没有太多场景使用，学了也忘了

• CSS可以花时间学习一下CSS3，看不懂不要紧，了解就好

• JS是前端的灵魂，你只要在这个阶段学习for if 语法的使用和一些常用对象（Date、String、Array）的使用就可以了

练手：你可以仿写一个淘宝的首页，

2. 熟悉JS的全貌(可以不精通，但是要熟练)

• 对js的正则、浏览器的dom、bom方法有了解

• 了解js面向对象编程和函数式编程，最好在这个阶段熟悉闭包，这是提升js的关键。

• 知道js原型链的构造，能在大脑里面有一个轮廓

• 知道js那些地方会出现异步，怎么去处理异步（如果有兴趣可以去看异步轮询的机制）

• jq、layui、bootstrap等可以要了解，没必要花大量时间深入去学习

• canvas和一些css3移动端适配（em、rem）等可以看自己兴趣和时间（现在大部分框架已经有自己的适配方案，比如小程序的rpx）

练手：写一写轮播图、选项卡（不要去用插件），有兴趣去阅读贪吃蛇代码，熟悉面向对象编程

注：这个阶段没必要学ajax，只有会一门后端语言，才能更好的理解http协议。

3. nodeJS学习

很多人说前端会nodeJS对工作帮助不大，这个我不反驳。但是会nodeJS绝对会对你学习ajax和模块化打包有很大帮助，我也推荐先学习nodeJs再学框架。

• 了解前后台交互的流程，熟悉ajax的使用

• 对请求头和响应头里面的常用的字段了解

• 返回的code码，熟悉200、302、404、403、500等常用错误

• 学会写一些增删改查的简单接口

• get和post的区别

练手：信息管理系统、学生管理系统（实现一些简单的增删改查）

注：可以不去学什么express、koa框架，但是如果想自己写点接口玩，还是有必要学。

4. Es6语法、（scss、less）、gulp打包、（layui、bootstrap、mui）

到了这个阶段，你离框架的学习就已经临门一脚了，如果想速成，就可以跳过这个阶段。

学肯定有学的好处，你的代码会更有效率、更加优美。起辅助的作用。

• ES6的语法的学习和JS学习是密不可分的，只有Js到达一定的程度，ES6才能融会贯通，所有不要强求自己一遍就学会ES6

• scss、less语法只要知道就行，用就百度

• gulp、webpack等打包工具，了解就行，很多招聘都是这样要求的

• ui框架不用太多去学，用就看文档

5.Vue全家桶

学习完这里，已经可以找工作了。这也是大多数公司所用的技术。

• webpack不用太多去学，复杂的配置也不用去记，直接上手脚手架都可以

• 对vue的生命周期要多记（面试常问）

• v-if v-show的区别

• 加key的作用

• 学会在开发过程中封装自己需要的组件（重点）

• vuex、vue-router、axios要熟练使用

  练手:b站上面有很多关于实战的项目。