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

最新推荐文章于 2025-04-24 09:17:44 发布

原创最新推荐文章于 2025-04-24 09:17:44 发布 · 6.8k 阅读

269 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #大前端 #ajax #css3 #html5

部署运行你感兴趣的模型镜像

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

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

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

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

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

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

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

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

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

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

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

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

1）HTML

2）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文档书籍教程,需要的话都可以找裙猪获取。