前端学习路线（前端零基础）

Hello！ 我是程序员米粉。目前在一家世界500强上市公司做全栈开发，曾担任10多人的前端小组的组长，喜欢分享各种前端技术、以前受人帮助，所以我也会传承这种助人为乐的精神。

前言

今天我们来简单聊一聊前端程序员的成长，学习什么前端技术，以及怎么学，如何从一个小白如何独当一面。前端的发展从我刚毕业那会只要会点 HTML、css、JavaScript、jquery 就有很多公司
抢着要，甚至前端开发那个岗位，也要会点 PS 设计。我曾经也做过，自己设计自己开发页面，自己也跟着用 php 开发。不过现在好多了，不需要自己设计自己用，但是前端的技术发展得
很快，也很多知识点，随着互联网的发展，前端做的事情更专注于开发。目前主流就 vue 全家桶、 React 全家桶、node 技术栈、等等。

面对市面上各种各样技术，一个前端程序员小白应该如何学习路线呢？人呢，总对不知道的事情会恐惧、迷茫和焦虑、这里大可以放心,今天来跟大家捋一捋，简单的来说一说，免得多走冤枉路。

第一阶段 基础入门

1. 学习 HTML5、CSS3 这个阶段，还是比较容易的，自己上网看一下一个初级教程，把 HTML5、CSS3 相关知识、示例都写一遍，学到一个什么阶段可以及格了呢？就是自己能独立完成一个 PC 端页面。

• 独立完成一个企业网站静态切图。例如： hao123 页面的静态切图。这个时候记得要多练，熟能生巧、
• 独立完成一个电商站，可以让同学们掌握更复杂的网页效果的开发流程和布局标准，做到100%还原设计稿。
• 学会处理好相关浏览器页面开发的兼容问题，这个比较烦心，多花点时间就好了。

1. web移动端开发（手机移动H5） 这个阶段，主要学习手机端的静态切图，独立完成，设计稿尽可能的100%还原设计稿，使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；完成移动端和多端适配效果。

第二阶段 技术进阶

经过第一阶段，我们掌握了 HTML5、CSS3 可以独立完成市面上所有的 企业站、复杂的电商网站、适配多端的手机端移动页面等等，静态页面的切图。

这个技术进阶阶段，就是让这些我们静态切图开发的能够动起来。实现网页数据交互与动画效果，并实现与后端数据的联通。那就需要学习核心内容 JavaScript：

JavaScript 零基础学习

这个阶段说实话，没接触过编程的时候，这是一个非常辛苦的阶段，作为曾经一个小白的我，毫无编程经验，因为我们学习的专业非计算机。所以当时学习，自学起来有点头疼，不过没所谓，坚持坚持一下就好了。
这个时候你需要你将掌握JavaScript基础从变量的定义与使用、数据类型及相互转换、运算符、流程控制语句、三元运算符、数组、函数、构造函数、内置对象以及对象等基础必备技能。

JavaScript 核心API

这个时候，你需要掌握与浏览器的技术相关的操作，根据产品的需求完成开发任务，例如视觉效果（动画、交互等等）、数据处理、安全、性能等，熟练掌握 DOM 操作的方法，能够分析视觉交互需求，结合 CSS 规则设计合理的 DOM 结构，完成开发任务。

AJAX 学习与后端数据交互&异步编程

这个阶段你差不多已经入门了。这个阶段，我们需要掌握的是 Ajax 原理，学习如何和后端数据交互；学会处理浏览器跨域、JSONP、模板引擎、节流防抖 等常用技术。
这里还算比较容易，很快就能掌握了。

第三阶段 vue开发

这里恭喜你，你已经掌握了 HTML5、css3、JavaScript 前端核心知识内容。成为一个完全入门的前端开发了。不过想要真正到公司能做项目，这里还需要再简单来学一下，相对前面的内容，比较简单一点。

Node.js 基础

这里为什么讲node.js，因为基础的 node.js 是前端目前主流框架，包括 React、 Vue 、Angular 前置知识。重点为铺垫 npm、包、模块化、身份认证、CORS 跨域等主要知识点，为学习后面的 React、 Vue 、Angular 课程夯实基础。同时，顺便学习 MySQL 数据库、API 接口项目开发等后端内容，拓宽了一下自己的知识面，为构建了前后端完整的知识体系，更好地发展。

vue2、vue3

这里我们需要学习一下vue2/vue3。国内最流行的框架之一，大中小厂都有的技术栈，只要学会这一个就可以找到不错的工作了。这里需要学习一下 vue的语法，也相对简单。这里需要掌握 vue全家桶，包括MVVM思想、模板语法、
计算属性与监听器、Class 与 Style 绑定、条件/列表渲染、事件处理、组件开发、vuex（状态管理）、hooks、Router 等等。

学到这里，你出去工作，一点问题都没有。可以完成一个核心的项目了。

第四阶段 React

React 技术栈，很多大厂都在用，包括 BAT、美团、京东、拼多多，等等。既然已经学习了 vue 就能胜任任何一个项目了，为什么还要学这个技术栈？其实我当初也这么想过，学了那么多，已经很累了，但是市场就这样，你不学很多人学，学了可以拓展一下知识面，也提高一下竞争力，等你真学会，发现真香！

React 开发

这里需要掌握 React全家桶 React 脚手架、JSX、函数组件、类组件、受控组件、组件通讯、Context、组件生命周期、高阶组件、hooks、Redux等等技术。学完了这么多，做个 Todolist（为什么选择它呢？因为这个小东西，包括了增删改查，日常工作需要用的操作），或者顺便用一个小项目练练手。

TypeScript （这个可以看个人选择）

TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。这里我们需要学习的东西也挺多的，
刚开始的时候挺痛苦的，不过掌握了，真的能把开发效率提高，bug减少。掌握基础知识以及高级的知识点之后，再结合 vue3 与 React 使用。

微信小程序

这个做小程序的开发，你们都学到这里来了，只要看文档，不用几天就能把一个小程序的入门掌握，这里需要掌握从基础的，小程序账号注册、开发环境搭建、基础语法、路由导航、数据请求、分包、组件化等知识点。
学完之后，再学习一下， uni-app 技术实现微信小程序的开发，可以做到一次开发多端部署。

第五阶段 学习路线总详情

好了，你已经掌握常用的前端知识点了。上述只是讲了一个大概的情况，如果真要很详细的。下面有一个图：

结语

所以希望看完这篇文章对你有帮助，文中如有错误，欢迎在评论区指正，如果这篇文章帮助到了你，

🌹🌹🌹欢迎点赞和关注🌹🌹🌹，后续会输出更好的分享。