自学前端，学多久可以入职前端工程师

假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学 前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。

即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。

如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。

想着想着，我就觉得有必要为那一天做点准备，以备不时之需。

01、第一个阶段，环境和工具准备

• 准备一台电脑，要能联网
• 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境
• 下载、配置MySQL
• 下载、安装 vscode
• 准备一个 GitHub 仓库（或者码云），管理前端源代码

前端是一门计算机编程语言，学它的话，连台电脑都没有，学个屁。我有个亲戚家的孩子想学编程，就只看书，家里连台电脑都不配，说什么“先打好理论基础，再实操”，我真的是有点醉。

有了电脑，还得联网，自学的过程中肯定会遇到很多问题，遇到问题的时候先问搜索引擎，推荐谷歌和必应；实在没有答案的话，也可以来找我，申请加入技术交流群，问问群里面的大佬们。

千万不要使用记事本编写源代码了，对于小白来说，时间是宝贵的，记事本只适合大牛们用来装逼，不适合小白用来编程（入门），纯浪费时间。

有了 vscode，后面学习源码的话，就会方便很多。

为什么还需要 GitHub 仓库或者码云仓库呢？它们可以用来在线云同步源代码，防止版本丢失。学到最后，还可以形成一套自己的工具库，轮子就有了，上班的时候工作效率就会高很多，能直接用的代码再也不用重新写了。

02、第二个阶段，前端基础入门

1）HTML

• 常用标签
• 锚点
• 列表标签
• 表单标签
• 表格标签
• 标签分类
• 标签语义化
• 注释
• 字符实体

2）CSS

• CSS介绍
• 全局样式
• 行内样式
• 内联样式
• 选择器
• 字体样式值
• 文本样式值
• 颜色样式值
• 盒模型
• 控制台使用
• 清除默认样式
• 盒模型居中
• 浮动
• 定位
• 外边距塌陷
• 标准文档流
• 行内块元素
• 多种伪类元素
• 块元素
• 行内元素

3）javascript初阶

• 变量和运算符
• 逻辑控制
• 数据类型基础
• Math类
• 函数
• 定时器
• Array类
• String类
• Date类
• Object类

4）JavaScript进阶

• JavaScript DOM基础
• this
• 事件
• 事件流
• JavaScript BOM 基础
• call&apply&bind
• 自定义属性
• 面向对象编程

5）ES6/7/8/9

• ECMAScript6简介
• let和const
• ES6+的作用域
• 对象的扩展
• 函数的扩展
• 字符串的扩展
• Symbol
• Set&Map
• Promise对象
• async&awiat
• 箭头函数
• 模板字符串
• rest参数
• Class
• Module模块

6）JavaScript高阶

• 闭包
• 立即执行函数
• 惰性函数
• 插件开发
• 多人协作
• 深复制与浅复制
• 数组扁平化
• 递归
• 正则表达式全解
• 函数防抖
• 函数节流

7）HTML5

• HTML5简介
• HTML5新语法
• HTML5新语义化标签
• HTML5新表单元素属性
• HTML5手机端新事件处理
• HTML5新增多媒体实战
• Canvas
• HTML5地理组件GeoLocation

8）CSS3

• CSS3新增属性
• 圆角制作企业级方案
• CSS3背景属性
• 过渡动画 transition
• 变化属性 transform
• 特效轮播图实战
• 企业级flex布局实战
• grid布局实战

03、第三个阶段，前端核心技术

1）bootstrap

• 响应式
• 媒体查询
• 栅格系统
• 栅格参数
• 组合模式
• 列偏移/列排序/自动列
• 列对齐/列嵌套
• 文本与颜色
• 按钮
• 导航
• 图文混排
• 模态框
• 轮播图
• 企业级案例讲解

2）移动端

• 移动端简介
• 移动端视口约束
• 移动端flex移动端实践
• rem
• vw

3）Ajax

• AJAX简介
• AJAX作用
• 封装AJAX
• 创建XMLhttpRquest对象
• 同步和异步
• AJAX分页

4）jQuery

• jQuery介绍
• jQuery链式语法
• jQuery选择器
• jQuery核心
• jQuery工具
• jQuery事件
• jQuery事件对象
• jQuery特效
• jQuery回调函数
• jQuery文档处理
• jQuery筛选
• jQuery属性
• jQueryCSS

5）Echarts

• Echarts概述
• Echarts使用
• 坐标系
• 雷达图/饼状图/折线图

04、第四个阶段，前端进阶升级

1）Webpack

• Webpack的安装和使用
• 项目模块打包
• 静态打包模块器
• Webpack入口
• Webpack输出
• Webpack插件
• webpack模块

2）vue

• Vue使用
• Vue响应式
• Vue双向数据绑定
• Vue相关指令
• vue-resource
• axios
• template选项
• Vue生命周期
• Vue组件
• 自定义指令
• 过滤器
• computed属性
• Vue-cli 2.x和3.x 脚手架配置
• Vue-router
• Vuex
• Element UI

3）微信小程序

• uni-app
• mpvue
• 微信小程序注册
• APPID申请
• 生命周期
• 小程序调试
• 微信小程序框架组件
• 微信小程序布局框架
• 微信小程序条件渲染和列表渲染
• 媒体组件audio
• 视图容器
• 网络api
• 相机api
• 地图api

4）数据结构和算法

• uniapp基础
• uniapp初始化配置
• uniapp视图模板使用
• uniapp生命周期
• uniapp路由跳转
• uniapp常用组件
• uniappScrollView的使用
• uniapp-ui使用
• uniapp-Vuex使用

我目前是在职前端开发，如果你现在也想学习前端开发技术，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我所在的前端学习交流裙：前面：42137 后面：4697。里面聚集了一些正在自学前端的初学者,转行者，初阶者，里面也有我整理的一些前端书籍PDF、前端面试题、前端开发源码教程等PDF文档书籍教程,需要的话都可以找裙猪获取。

05、第五个阶段，活着最重要

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！