0基础学习前端要多久？

作者：黑马线上前端
链接：https://www.zhihu.com/question/582777565/answer/2896484685

我来告诉学习前端需要多久？如何学习前端？前端全套系统资料。

前端的技术体系还是比较系统的，内容也不算少。想要系统学完的话，根据我们十多年的经验来说，至少也要5个月左右（这个体系的学习目标是将来就业薪资可以万元左右），如果有小伙伴说那我的目标薪资只要5000，那是不是我只学习一半就行呀，这个逻辑其实是不对的。

那就好像是我不想上清华北大，是不是只学体育、音乐课就行了。

接下来我就给你具体拆分下前端开发的学习路线以及时间分配。按照这个学习，绝对可以顺利入门前端。

一、学习路线图：

下面这个就是前端开发工程师学习路线图，里面包含了目前最主流的前端技术，也是最实用的；这里你需要先对前端开发工程师的整个技术体系有个基本的认知。这样对你后面学习也会更加有路线感。

二、为什么要学这些技术：

凡事必有因果，突然给你说了一张图，列举了那么多要学的技术，可能会有小伙伴有疑问，你说学这些，就学这些，那我岂不是很没有存在感。那既然是这样，接下来我就让你有存在感。

说点实在的，我们学习的目的就业找工作，所以，我们要学习或者要掌握的技能一定是企业需要的。所以我们要学习的内容就来源于市场的需求，那我们怎么看企业的需求呢？当然是招聘网站了。

强烈建议收藏，方便以后忘了反复查看，及时指导学习。

ps：这个大家也可以自己去看，这个方法也可以用到很多其他的领域，叫做“以终为始”。

我们可以从前端开发招聘的需求中看出，企业招人的要求，需要具备哪些技能和能力。我们就可以针对性的去学习。当然不是盲目的去学习，而是需要系统的学习，这样知识体系才是完整的，综合能力才能过硬。

以下截图大型招聘网站对于前端开发工程师岗位的要求：

通过如上截图可以看出来，其实要从事前端开发相关的工作，要求其实还是挺多的，而且每家公司的业务不同所要求的具备的能力也是不同的。

虽然招聘需求不尽相同，但是还是有很多共同点，上面这个学习路线图的作用就是为大家梳理了招目前招聘市场对前端开发工程师的要求。

作为一名前端开发者，我深知科技革命的推动离不开技术精英们的不断探索和努力。在我们的领域中，不断学习和掌握新知识也是我们不断进步的关键，而阅读是一个非常重要的途径，尤其是阅读关于前端开发的优秀书籍和文献，这些内容会成为我们成长路上的良师益友。

我个人认为，阅读是前端开发者中最具效益的个人成长方式之一。尽管书籍价格不高，但它们的内容和深度却可以帮助我们深入了解前端开发的各种技术和概念，这些知识也是我们在工作中不断迭代、改进和创新的基础。

因此，我强烈建议前端开发者在职业发展过程中注重阅读。如果你希望在前端开发领域获得更深入的发展，我建议你挑选一些有深度、有价值的书籍，并在实践中不断运用和总结，这将会帮助你不断提高自己的技术水平和能力。

以下这份包含103本前端经典书籍的书单（其中32本是豆瓣评分8分+），是我花费一个月时间整理的：

点击下方链接，获取103本经典书单：

2023年前端全套学习资料（视频+配套资料+源码）

免费领取103本前端开发电子书（含代码）

三、时间分配：

大致可以分为7个阶段：

**网页布局新课时：10天**

主讲内容

HTML | CSS | 企业级小兔鲜儿电商项目首页制作

内容介绍

1. HTML 负责网页的结构层，是网页开发的基础，从简单的网页骨架搭建入手，使用常见的 HTML 标签丰富网页结构。
2. 在 HTML 搭建的网页结构基础上，通过 CSS选择器精准选择标签，使用外观、盒模型相关属性完成网页全部内容，利用浮动、定位等布局技巧精准控制网页布局，最终结合背景、圆角、阴影等装饰属性进一步美化网页效果，达到能够编写企业级大型综合网页。
3. 借助PxCook工具，基于设计稿编写网页，确保网页的高度还原，通过综合运用 HTML + CSS 技术，按照实际项目开发流程，归纳开发技巧，提升综合实战水平，最终完成企业级小兔鲜儿电商项目PC端首页开发。

可掌握的核心能力

借助PxCook工具，参照设计稿，能综合使用HTML+CSS技术完成企业级小兔鲜儿电商项目PC端首页开发。

**移动Web 新课时：7天**

主讲内容

CSS高级特效 | 移动适配 | 响应式

内容介绍

1. 使用css高级特效丰富网页元素的呈现方式和效果。
2. 首先介绍Flex布局模型,实现移动端网页的基本布局;再讲解两种移动端网页适配不同分辨率的解决方案,并使用不同的解决方案制作网页元素宽高随着视口的变化而等比缩放的效果。
3. 学习响应式的原理,并使用bootstrap框架完成响应式网页的布局。

可掌握的核心能力

1. 使用CSS高级特效，丰富网页元素的呈现方式和效果。
2. 使用rem或vw、vh实现网页元素宽高随着视口变化等比缩放的效果。
3. 使用bootstrap框架布局响应式网页。

JavaScript新课时：24天

主讲内容

JavaScript基础 | WebAPI | JavaScript高级 | Ajax | Git

内容介绍

1. 学习JavaScript基础语法规则。
2. 学习DOM和BOM对象的属性和方法,以完成网页常见的交互效果。
3. 深入理解 ECMAScript 的知识体系及工作机制，熟悉 ES6+ 新的语法特性，注重抽象思维的培养，具备面向对象编程的的能力。
4. 利用 axios 发起 Ajax 请求，实现前后端的数据交互。并讲解 HTTP 请求的过程以及 Ajax 的底层原理。深入学习 JS 异步的底层原理，能够使用 Promise 处理异步操作，并使用 async/await 简化异步操作。
5. 能够创建 Git 仓库管理前端项目，基于 Git 分支进行多人协同开发，并且能够把本地的 Git 仓库同步到远程码云或 Github 仓库中。

可掌握的核心能力

1. 掌握JavaScript基础语法，培养编程逻辑思维。
2. 掌握DOM和BOM对象的常用属性和方法，能够完成网页常见的交互效果。
3. 能够使用 axios 实现 Ajax 操作，为后续项目课做好技术铺垫。
4. 能够运用 Git 管理前端项目，并且使用 Git 分支进行多人协同开发。
5. 能够使用 Promise 与 async/await 高效的实现异步操作。

Vue.js新课时：41天

主讲内容

框架前置课 | Vue核心技术 | Vue3.0高级 | TypeScript

内容介绍

1. 掌握模块化思想，npm包管理，webpack基础，初探工程化开发。
2. 运用Vue2.0全家桶核心内容实现开发中常见的功能，如购物车，经典列表、TodoMVC等。运用 Vant 开发移动端，运用element-ui开发PC后台管理系统。
3. 掌握Vue3新特性、Vite、组合API、Pinia 等。
4. 掌握TypeScript基础语法，并且在Vue3项目中熟练运用TypeScript。

可掌握的核心能力

通过 Vue2 和 Vue3 的基础学习，掌握企业开发中常见业务功能实现；通过深入 Vue 技术栈学习 vue-router vuex vant element-ui 等主流技术，掌握企业级项目开发方式，如移动端H5项目实与PC端管理项目；通过 Vue3 结合 TypeScript 的技术学习，掌握大型企业级项目开发技巧。

**小程序新课时：12天**

主讲内容

原生小程序 | uni-app | 电商项目

内容介绍

1. 了解小程序开发的一般流程序，熟悉小程基础组件的使用，能够基于 wxml 和 wxss 实现小程序的界面布局，基于模板的数据绑定实现数据的动态渲染，基于 API 实现与服务端的数据通信，以及熟悉其它高级 API 的使用。
2. 理解 uni-app 实现跨平台开发的原理机制，理清单文件组件与原生小程序组件的对应关系，以及 uni-app 开发小程序时开发时与原生小程序的差异。
3. 基于真实需求综合运用小程序开发的相关知识，突出小程序 API 的真实应用场景，强化和巩固小程序开发的相关知识，提升综合解决问题的能力。

可掌握的核心能力

独立开发原生小程序，能够使用uni-app开发小程序，提高就业能力，就业的加分项。

React.js新课时：6天

主讲内容

React 核心技术|Hooks 深入+路由|Redux +中间件 + Redux Toolkit|记账本案例

内容介绍

1. 基于 React 脚手架（create-react-app）搭建React项目，掌握JSX语法搭建页面结构，使用函数组件实现组件化开发，掌握组件通讯在项目开发中的使用。
2. 掌握 useEffect Hook 的应用，掌握 useRef Hook 的高级用法，理解 Hooks 原理，掌握 react-router-dom 的应用。
3. 掌握 React 最常用状态管理工具 Redux 的基本使用，使用 react-redux 链接库在 React 中使用 Redux，掌握 Redux 中间件 redux-thunk 用来处理异步请求，掌握 Redux Tookit 简化 Redux 的使用。
4. 利用 React + Hooks + Redux Tookit 实现记账本案例，对整个 React 阶段所学内容进行练习，验证我们是否掌握了 React 开发能力。

可掌握的核心能力

通过 React + Hooks + Redux Toolkit 的学习，实现多种业务场景下的功能开发，如 B站评论、知乎频道管理、美团外卖、极客园、记账本等业务功能。

四、项目阶段

**数据看板项目新课时：3天**

数据看板是一个数据可视化项目，通过折线图、K线图、柱状图等图表形式归纳汇总大量数据，以直观的方式展示数据。学员通过学习该项目，能够掌握数据可视化、异步编程、实时数据获取等技术解决方案，适合有基础希望技能强化的IT人员继续学习。

体验地址：体验地址：{\color{red}{体验地址：}} 立可得

主讲内容

1. 基于axios 实现网站注册和登录功能。
2. 基于 Echarts 结合需求高度自定义不同类型的可视化图表。
3. Ajax、数据渲染和服务端推送前后端分离技术的应用。
4. 基于 token 的访问权限控制功能。

项目介绍

数据看板是一个数据可视化项目，通过折线图、K线图、柱状图等图表形式归纳汇总大量数据，以实现更加直观的数据表达效果。学员通过学习该项目，能够掌握数据可视化、异步编程、实时数据获取等技术解决方案，适合有基础希望技能强化的IT人员继续学习。

可掌握的核心能力

1. 掌握Echarts 各类型数据可视化图表的应用
2. 能够根据需要求创建折线图、K线图、地图等图表
3. 掌握前后端分离技术的实现方式并了解其意义
4. 掌握使用token进行访问鉴权功能实现

**面经全端项目新课时：5天**

黑马面面是一款面试刷题程序，系统包含答题状况管理、学科管理、企业管理、用户管理等综合管理功能。学员通过该项目可学习Element-UI功能组件、ECharts数据可视化、axios、JWT、Vue CLI、Vuex整体数据共享、Vue Router 等多个技术解决方案。

体验地址：体验地址：{\color{red}{体验地址：}} 黑马面面

主讲内容

1. 基于 vue-cli 创建工程化的 Vue 项目。
2. 基于 element-ui 组件库快速实现项目布局。
3. 用户注册与登录的业务解决方案。
4. 使用 Vuex 管理全局共享的数据。
5. 使用 axios 实现前后端的数据交互。
6. 基于 vant 组件库快速构建移动端界面。

项目介绍

面经系统，由面试经验文章PC管理后台，个人H5端面试文章浏览组成。学员学习该项目，能够锻炼对 Vue 完整技术栈的运用。同时该项目还涵盖了 token 身份认证、Vue 组件库、文件上传、富文本编辑器等前端技术解决方案，移动端开发，适合刚入手 Vue 框架、希望通过项目开发来巩固 Vue 基础的前端开发者学习。

可掌握的核心能力

1. 掌握 element-ui 组件库的运用
2. 掌握 axios 以及拦截器的应用
3. 掌握 Vuex 管理全局状态的技术解决方案
4. 熟练使用 vue-router 管理组件的切换展示
5. 掌握 element-ui 中如何自定义表单的校验规则
6. 掌握文件上传和富文本编辑器在 Vue 项目中的应用
7. 掌握 Vant 组件库的运用
8. 掌握使用 postcss-px-to-viewport 实现移动端适配

**iHRM人力资源项目新课时：12天**

iHRM人力资源管理系统是一款在线HR人力资源管理系统，帮助企业管理人事信息、员工档案、绩效考核等。利用HR软件充分发挥人力资源的价值，通过企业人事HR管理人力资源，从而保持人才竞争力。

体验地址：体验地址：{\color{red}{体验地址：}} iHRM人力资源管理系统

主讲内容

项目介绍

iHRM是一款基于SaaS平台的人力资源管理系统，企业通过该系统可以完成公司组织架构管理、员工管理、角色管理、权限管理（审批、考勤、社保）等，为企业的人力资源管理提供一站式解决方案。

可掌握的核心能力

1. 掌握Vue + Element技术栈在开发管理型后台项目的技术开发能力
2. 具备角色，人员，权限类系统的设计整体设计及应用能力。
3. 拥有Vue.js相关的技术要点及配套的插件，解决方案深度使用能力

**优医问诊项目新课时：12天**

优医问诊H5项目，对标【某香医生】、【某东健康】、【某里健康】等在线医疗项目，本项目涵盖了在线问诊的主流业务，致力于交付完整的在线问诊业务解决方案，让学员成为具备在线问诊业务能力的前端开发工程师。

体验地址：体验地址：{\color{red}{体验地址：}} 优医问诊

主讲内容

项目介绍

优医问诊是一个连接医生和患者的移动医疗行业H5应用，通过高效、快速的在线问诊服务，为患者提供健康帮助，涵盖了找医生、快速问诊、开药门诊、疾病查询，健康百科等功能。该项目基于Vue3+TypeScript进行开发，且引入下一代状态管理工具 Pinia 和热门的前端移动UI组件库 Vant ，采用全新技术栈，给学员带来企业实战项目，助力学员高薪就业。

可掌握的核心能力

1. 掌握使用Vue3 + TypeScript 开发大型前端项目开发能力
2. 掌握使用Vant组件库开发移动端项目能力
3. 掌握 Pinia 状态管理工具实现项目状态管理
4. 掌握第三方登录和第三方支付业务解决能力
5. 掌握快速问诊等在线问诊主流业务开发能力

**小兔鲜电商小程序新课时：12天**

小兔鲜儿电商是对标网易严选的综合品类的网上商城项目，本项目涵盖了电商的主流业务，致力于交付完整的电商业务解决方案，让学员成为具备电商业务能力的前端开发工程师。

体验地址：体验地址：{\color{red}{体验地址：}} 小兔鲜

主讲内容

1. uni-app跨平台开发框架。
2. 组件封装及通信。
3. 微信支付/登录。
4. pinia 状态管理。
5. 基于vue3+ts技术实践方案。
6. 小程序云开发。
7. vant组件库。

项目介绍

小程序无需安装，用完即走的应用方式越来越受到用户的欢迎，企业也都纷纷开展了小程序的开发。小兔鲜儿是一个经典的电商类小程序项目，包括商品、用户、购物车、订单等核心功能模块，采用 uni-app 框架做为跨平台小程序开发方案，并综合运用了原生小程序的组件化、模块化、网络请求、本地存储、微信登录、微信支付等技术，小兔鲜电商项目以企业的需求为基础，有针对性的对课程进行设计，学习本课程不仅能够培养学员的实践能力，还可以为就业提供有利的支撑。

可掌握的核心能力

1. 能够开发跨平台的小程序
2. 能够独立开发小程序项目
3. 掌握微信登录的实现方式
4. 掌握微信支付的实现方式

五、简历&面试指导

这里就不多说了，是什么写什么就好。

开发经验

精通 HTML、CSS、JS 基础，熟悉 H5、CSS3 新属性，熟悉 ES6 新特性
熟悉响应式，flex 等页面布局方式，熟练使用 less、sass
熟练运用 Vue、React 前端开发框架，了解 ReactNative 的基本实现原理
熟悉组件间的通信和数据的管理 , 熟练 Redux/Vuex 使用
熟悉常见 UI 框架如：Bootstrap、Element-UI、Vant、Ant-design 等
熟悉 Webpack 等构建工具
熟悉微信小程序开发流程
熟练使用 Git 等项目管理工具
了解 NodeJS，了解 Express 框架开发

项目经历（这里可以参考写）

项目一：优联校园后台管理系统

项目描述：优联校园是一款大学生校园生活服务软件，为在校大学生提供社团活动，二手交易，学生兼职，学生租房，驾校报名、微商城等服务，项目技术栈：React + React-router + Axios + Ant-design + React-redux

责任描述：

1. 负责应用管理模块，包括社团管理、二手交易、学生兼职、学生租房等界面，使用 Antd 中 Button , Form , Modal ,
Table 等组件来展示页面
2. 使用 React-router 来配置路由，实现组件间页面的跳转
3. 使用 Axios 来请求数据并渲染页面
4. 根据需求文档完成业务逻辑
5. 抽离公共组件并封装到项目组件库中

自我介绍

多人说不要写自我评价。觉得这个版块非常没有用。我认为恰恰相反，千篇一律的自我评价，什么认真啊踏实啊确实让人反感。

详细简历介绍可以看这篇回答：面试前端工程师简历应该怎么写才容易通过？

六、写在最后

1、自学能力

自学能力，是主观因素中一个非常重要的能力。

因为编程领域中的技术大多是不断在更新的，这个过程中是不会有人专门带你去学习的。那要如何快速并深入地掌握一门技术呢？就是自学。但如果你自学能力很弱，要怎么办呢？几个小建议送给你~

拒绝拖延症
不要今日复明日，如果你决定做，那么就要立刻做。一旦开始，你就成功了一半。
学会专注模式
有的小盆友即使想学习，但却无法坚持太长时间，就会精力发散。
这时候你要学会沉浸自己，练习每天拿出2-3个小时学习，这个时间段不要去触碰手机、pad或者是其他你感兴趣的东西，慢慢将注意力放在学习内容上。即使开始很难受，但是慢慢养成习惯之后就好了。
注重学习方法
学习不是一味地照搬照抄、死记硬背，是将别人的输出内化为自己的东西。
比如，老师讲的A知识点，你需要将它分解，并吸收掉，即使脱离老师的指示，你也能用自己的话说清楚A知识点是什么东西。当然，如果你还能举一反三，那就更好了。
学会复习
根据艾宾浩斯记忆与遗忘曲线表明，遗忘是有规律的，先快后慢。

遗忘从学习开始时就发生了，并且速度较快，然后遗忘速度下降，到达一定程度后，就不会再遗忘了。所以及时复习是防止遗忘或者减缓遗忘的有效办法。

2、自律和毅力

引用一句名言“要学好编程，兴趣和毅力必须要有一样”，毅力其实在某种程度上比兴趣更加重要。兴趣能带你入门，但持之以恒的毅力才能让你在长途跋涉的工作过程中坚持下来，才能让你在一次次的失败中快速崛起。

编程其实挺枯燥的，坐在电脑前，一天可能要不止8个小时。对编程感兴趣的人自然是乐在其中，那么其他人呢，靠的是什么？是自律和毅力。

你不能只看到技术大牛在解决问题时的轻松潇洒、深不可测，而是要知道他们背后花了多少时间，下了多少苦功。

跟你说个真人真事吧（老师的亲身经历），就是我的好朋友，小K。

我们是在大学一次兼职中认识的，他是哲学系，我是计算机系。得知我的专业是编程，他十分感兴趣，详细了解后他也开始了学习编程之路。

由于他是文科，逻辑思维不强。
于是他平时手里经常拿着一个本，想到什么记什么，看到什么、听到什么就写什么。等晚上他就把这些与知识无关的东西去梳理，目的不是要总结出什么来，而是为了复述、总结这一天都做了什么。久而久之他的思维顺畅了很多。
他英语很好，但是没什么编程基础，所以初期学习很费力。
于是他每天都用思维导图去整理老师上课的内容形成笔记，每日一篇，从来不落，以至于后来大家在考试之前都朝他要笔记，以作复习使用。
他是个电脑小白
开始的时候只会用个QQ，创建个文档。什么DOS界面，盘符，包括文件后缀都不懂，打字也很费劲，但是他每天都坚持照着老师的代码敲，反复的敲，直到他可以独立打出演示代码为止。
最后，他很愿意和我们沟通，有疑问就提出，并且自己会看一些编程基础的书，去网上搜索一些练习题去做。

就这样，日复一日，一年后，他学成了。如今已经毕业多年，他依旧不忘学习和进步，现在某条，年薪60万。

你以为他本身就是聪明，所以学的很轻松？不是的。

上面我说的这几条，他每天都会花费大概4-6个小时的时间。此外，他还要上他本专业的课，去完成本专业老师给他的任务。也许就是在我们刷剧，玩游戏的时候他在学习；我们侃大山，逛街看电影的时候，他也在学习。

这就是一个人的自律和毅力，当然，他现在的成就也是匹配得起他的付出的。

整理不易呀，眼睛都留眼泪了。亲爱的小伙伴儿们，如果觉得资源对你有用，点个赞 +收个藏，给我者一个鼓励吧。也方便你下次能够快速查找。

能看到这里，说明你的认真已经超过绝大多数人！所以，作为勉励，给你了准备几份礼物。

ps：我花了1个月的时间，总结了前端开发入门学习路线，以及每个阶段的最全知识点，HTML/CSS/JavaScript/Vue/React/Node/小程序等主流技术栈，希望能帮你解决资料缺乏的情况，可以点击下方链接领取：

前端开发学习路线2023版-黑马程序员web前端开发自学路线

❤️我给你准备的资料，区别于其他人随便拼凑的垃圾资料，真的是非常用心打磨的爆款干货合集，一定会颠覆你以往的认知，记得打印出来，带学习过程中去反复阅读参考～

为了写这篇内容，本来为数不多的发量也是日渐稀少。

如果对你有用，一定记得【点赞+收藏+喜欢】哦！