前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!

2022-01-01 学习路线

0

大家好,我是xy,写了好几天,终于在今天完成啦!可以堪称是史上最贴心的前端学习路线了,帮助大家少走弯路急速超车💂 + 💻 = 👴🏽 如果觉得这个超车路线有帮助到你,记得 ⭐️关注⭐️ 我哦,我的公众号:前端开发爱好者。一大波学习资源即将来袭,收藏保存吧🔥🔥🔥

# 前言

经常有同学会问我,学到什么程度可以找到一份前端工作,或者会问如何入门前端,学习到什么程度可以胜任业务开发以及前端如何进阶等问题。别急!!!下面我们来把前端学习分为几个阶段,帮助你如何从一个小白成为前端大佬。每个阶段会附上每个阶段的学习资源,请大家认真仔细阅读哦 📚。重要提醒:能自学的小伙伴真的不建议大家报班学习!!!

# 前端入门

工欲善其事,必先利其器。

⭐️ 前端开发必备工具:

  • Vscode:95%前端都在用的开发工具
  • Chrome:谷歌浏览器,对开发者友好
  • FastStone Capture:非常好用的吸色工具
  • ......

⭐️ 学习记笔记:

  • 前端知识点非常繁杂,需要做笔记。这里推荐大家使用 Markdown 语法来做笔记。也可以根据自己的爱好使用在线版的笔记工具,这里不做过多推荐。
  • Markdown:多平台支持、轻量化、易读易写。对后期想要自己写博客的同学有很大的帮助,学习语法地址:http://markdown.p2hp.com/basic-syntax/

⭐️ 前端三件套:

基础三件套:HTML,CSS,JS,建议从实战开始,边学边练,培养兴趣,快速入门。

  • HTML,CSS学习:推荐 pink 老师的前端入门教程 https://www.bilibili.com/video/BV14J4114768

    • 🎯 目标:学完以上的课程可以自己尝试去模仿一个网站的页面巩固HTML,CSS基本功
  • js基础学习:pink 老师的也不错 https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.8

    • 🎯 目标:学完以上的课程,可以自己动手开发一个商城类型的网站。做一些本地数据的增删改查,尽可能的多运用js,巩固 js 基础。
  • HTML5,CSS3学习:这个也是重点,而且初级前端面试好像特别喜欢问这个

    • ⭐️ 语义化标签
    • ⭐️ 浏览器支持
    • ⭐️ 多媒体标签
    • ⭐️ Canvas 画布
    • ⭐️ 本地存储
    • ⭐️ 媒体查询
    • ⭐️ Flex 布局
    • ⭐️ Grid 布局
    • ⭐️ 瀑布流
    • ⭐️ 响应式布局
    • ⭐️ 动画
    • ⭐️ 过渡
    • ⭐️ 2D / 3D 转换

⭐️ ajax 请求

  • ajax学习:ajax 通过原生的XMLHttpRequest对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON 格式的数据,XML 格式已经过时了。学习推荐文档:http://javascript.ruanyifeng.com/bom/ajax.html

    • 🎯 目标:学完 ajax,可以尝试去调用后端接口获取数据,没有接口的同学可以找一些开放的 api 调用,这里百度就可以找到了。

# 基础进阶

有些同学喜欢看书,但是市面上的书千千万万,这里推荐三本比较适合前期学习想要巩固下基础知识的同学:

  • 《JavaScript 高级程序设计》
  • 《JavaScript 忍者秘籍》
  • 《JavaScript设计模式与开发实践》

📚 想要这三本书电子版的同学可以到我的公众号内回复 js书籍 即可免费无套路获取

⭐️ js高级进阶

  • 强烈 ❗ 建议看下这个:https://ke.qq.com/course/231577?taid=1464811481434265(7-12 节讲的递归,预编译,作用域、作用域链精解,立即执行函数,闭包,原型,原型链,call/apply,继承模式,命名空间,对象枚举) 我刚开始学习的时候也是看的这个,讲的很不错!!!

⭐️ ES6新特性❗❗❗

  • 这个也是重点中的重点,可以看阮一峰的教程https://es6.ruanyifeng.com/

⭐️ 浏览器

  • 前端开发1000%的时间都是在和浏览器打交道,必须要了解它

    • 浏览器 DOM 事件流 / 事件委托
    • ⭐️ 浏览器加载顺序
    • ⭐️ 浏览器渲染过程
    • 浏览器事件循环
    • 浏览器同源策略
    • ❗ 跨域解决方案
    • 浏览器缓存
    • 控制台调试技巧

⭐️ HTTP

  • 和后端交互避免不了,也是必学

    • 1xx 信息
    • 2xx 成功
    • 3xx 重定向
    • 4xx 客户端错误
    • 5xx 服务器错误
    • HTTP 1.0
    • ⭐️ HTTP 1.1
    • HTTP 2
    • HTTP 3
    • ❗ HTTP 请求过程
    • 常见 HTTP 协议
    • ⭐️ HTTP 请求类别
    • ⭐️ 常见状态码
    • WebSocket
    • ⭐️ Cookie
    • Session
    • ⭐️ HTTPS

⭐️Git 版本控制

  • 这个也是重点,不管到哪个公司都是必会的,常用命令如下,也可以看这篇文章《我在工作中是如何使用 git 的》https://mp.weixin.qq.com/s/gdqVcrrY3h948UMGlfF3qA

    • git init
    • git clone
    • git status
    • git log
    • git add
    • git diff
    • git commit
    • git reset
    • git branch
    • git checkout
    • git merge
    • git pull
    • git push
    • .....

# 前端框架学习

为什么要学习框架???因为框架可以提高我们的开发效率简化代码的复杂度

⭐️ CSS 框架

  • ⭐️ Less
  • ⭐️ Sass
  • ⭐️ Stylus
  • ⭐️ Tailwind CSS(推荐学习)

Less,Sass,Stylus 不能算是框架吧,可以归纳为 css 预处理器。三者语法类似,学习一种使用其它基本上结合文档能够运用。

Tailwind 是一个用于快速 UI 开发的实用工具集 CSS 框架,设计理念是以实用为先,它提供了高度可组合的应用程序类,可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具,响应式风格可以满足不同设备上的开发。

⭐️ javaScript 框架(找工作必备)

这里主要介绍 Vue React 两个框架,这两个是目前使用最多的框架。Angular目前不推荐,使用的公司寥寥无几,还有就是后起之秀Svelte,起码初学者目前不建议学习吧

  • ⭐️Vue
  • ⭐️React

⭐️ Vue 学习

经常听到有人说Vue全家桶,那我们就来说说这个全家桶都包含了什么吧

先来说说Vue2.x:

  • Vue 全家桶

    • Vue (整体架构)
    • Vue Router (路由)
    • Vuex (状态管理)
    • axios (请求库)
    • less/scss (css 预处理器)
    • Element UI (非常流行的 PC 端 UI 框架库)

同时,在初始化项目时候,比较推荐 Vue Cli Serve, 以上只能算是大多数公司比较常用的配置了。

实战教程:Vue2.x 由于已经出来很久了,所以市面上的教程比较多,小白的话可以到 B 站搜索一个基础+实战的视频,这里不做过多的推荐.其实本人更推荐直接看官方文档以及看一些技术文档,上手更快一些

Vue3:可以说是今年比较火热的了,早在去年 Vue 还是 rc 版本的时候就拿来搭建过一个项目,但是由于时间有点久远有点忘记了,但是没事,这里推荐一门针对 Vue3.0 的实战教程《vue3.0+ts仿知乎专栏企业级项目》,需要的关注我的公众号回复【Vue 实战】即可获取哦

⭐️ React 学习

  • React 全家桶

    • React (整体架构)
    • react-route (路由)
    • redux (状态管理)
    • axios (请求库)
    • redux-saga (redux 中间件)
    • less/scss (css 预处理器)
    • Ant Design (蚂蚁 UI 框架库,90% react 开发都使用这个)
    • react hook 目前开发主流,必看

    这里再来介绍两个 React 的状态管理库:Dvajs Mobx,为什么要推荐这两个库,用过 redux 的人都知道,完整的一套写下来,要写还多代码,而这两个库就是专门简化它的,目前也是使用比较多的。

❗❗❗重点来了,重磅级实战教程《React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目》,废话不多说,公众号后台回复【react 实战】即可获取完整教程

  • ⭐️ umi (非常推荐):插件化的企业级前端应用框架,有哪些优点:

    • Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成

    • Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集

    • 同时支持配置式路由和约定式路由

    • ......

    • ⭐️⭐️⭐️⭐️⭐️ 目前本人所在的公司就是使用的这一套框架,非常推荐使用。

    • 学过 react 全家桶的同学,学习 umi 可以说是很轻松,完全看文档就能驾驭得了。

    • 使用hooks开发的同学这里推荐两个非常好用的hooks库:ahooks react-use,想要了解更多推荐看这篇文章《130+ Hooks,解锁React Hooks使用的正确姿势》-https://mp.weixin.qq.com/s/87HPw1vs9smsfgEUGpWF8Q

⭐️ TypeScript 学习

TypeScript是什么?如果你还不知道的话真的就 Out 了,目前 Vue3.0 React 都可以使用 TypeScript 来开发,而且使用度非常高,前端必备。

TypeScript 教程目前也有很多,这里挑选了两个比较好的教程,可以直接到我的公众号主页菜单中就可以获取或者回复【ts】即可获取视频教程

⭐️ 可视化

最近几年可视化真的太火了,有不少公司都是专门做这块,这里推荐几个比较好用的可视化框架:

  • 可视化:

    • ⭐️AntV
    • ⭐️echarts (很推荐学习)
    • highcharts
    • D3.js
    • ⭐️threejs (三维可视化)
    • ⭐️cesiums (地理信息可视化)

⭐️ 服务端渲染

  • Vue

    • Nuxt.js入门:https://www.bilibili.com/video/BV1Xt41117Kg
  • React

    • Next.js入门:https://www.bilibili.com/video/BV13441117KK

Vue React 这两个框架任意会一种, js 基础再学的好点,⭐️ 恭喜你 ⭐️ 基本上可以找到一份很不错的工作了。

# 中级前端进阶

⭐️ 打包构建工具:前端资源打包压缩编译等

  • ⭐️webpack(重点)
  • Vite(https://vitejs.cn/)
  • Rollup

📚 ⭐️webpack官网:https://webpack.docschina.org/

📚 Vite官网:https://vitejs.cn/

📚 Vite入门到精通:公众号回复【Vite】获取视频教程

⭐️ Nodejs: 一种 javascript 的运行环境,能够使得 javascript 脱离浏览器运行

  • koa
  • express
  • egg

📚 Node.js 官方教程:http://nodejs.cn/learn

📚 Node.js 入门:https://cnodejs.org/getstart

📚 ⭐️Node.js+Koa2实战:公众号回复【Node】获取视频教程

⭐️ 包管理:用于安装 Node.js 的扩展、工具等。

  • ⭐️npm
  • ⭐️yarn
  • ⭐️pnpm
  • ⭐️npx

⭐️ 性能优化

  • 推荐看下这篇:《9大策略和6大指标 》https://mp.weixin.qq.com/s/rlUlqOgN76W1pZggB16STA

⭐️ 数据结构算法

  • ⭐️ 时间 / 空间复杂度分析
  • 数据结构:数组,字符串,队列,栈,链表,集合,哈希表,二叉树
  • 算法:排序,双指针,查找,分治,动态规划,递归,回溯,贪心,位运算,DFS,BFS

📚 ⭐️数据结构算法:公众号回复【数据结构算法】获取视频教程

⭐️ CI/CD

  • Jenkins: 自动化构建工具

⭐️ Nginx

  • 高性能的HTTP反向代理web 服务器

⭐️ Linux

  • ⭐️ 常用命令

# 大前端

⭐️ 小程序、多平台开发:

  • uniapp
  • taro

⭐️ 混合开发 App:

  • react-native
  • uniapp
  • Flutter

⭐️ 桌面应用:

  • Electron

# 微前端

⭐️ qiankun:

  • 推荐看《基于qiankun的微前端最佳实践》https://mp.weixin.qq.com/s/onuOB3nl_eM0OHhZL6fpTQ

⭐️ sign-spa

以上就是针对前端入门到进阶再进阶的路线了,其实还有很多,这里就不一一讲解。前端路漫漫,各位骚年,你准备好了吗

# 求职面试

求职是一个漫长的过程,千万不要为了想要早点上班工作或者为了2-3K薪水的差距而选择了自己不理想的工作。建议结合自身的发展,给自己设定一个长远的目标和计划。

  • 📚面试题:

    • ⭐️面经汇总:https://www.nowcoder.com/discuss/205497
    • ⭐️字节大佬总结的面试题:公众号内回复【面试题】
  • 📚3200套简历模板:

    • ⭐️简历模板获取:公众号内回复【简历】

# 推荐技术社区

这里推荐几个自己比较喜欢看的一些社区平台

  • 微信公众号
  • 掘金
  • MDN
  • MSDN
  • StackOverflow
  • InfoQ
  • Github
  • ...

目前我比较喜欢刷这两个,没事在休息的时候刷一刷,还是能提升自己很多知识的积累的👍👍👍

# 写在最后

公众号前端开发爱好者 专注分享 web 前端相关技术文章视频教程资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个 👍 或者关注 ➕ 都是对我最大的支持。

欢迎长按图片加好友,我会第一时间和你分享前端行业趋势面试资源学习途径等等。

user

关注公众号后,在首页:

  • 回复面试题,获取最新大厂面试资料。
  • 回复简历,获取 3200套 简历模板。
  • 回复React实战,获取 React 最新实战教程。
  • 回复Vue实战,获取 Vue 最新实战教程。
  • 回复ts,获取 TypeAcript 精讲课程。
  • 回复vite,获取 精讲课程。
  • 回复uniapp,获取 uniapp 精讲课程。
  • 回复js书籍,获取 js进阶 必看书籍。
  • 回复Node,获取 Nodejs+koa2 实战教程。
  • 回复数据结构算法,获取 数据结构算法 教程。
  • 回复架构师,获取 架构师学习资源教程。
  • 更多教程资源应用尽有,欢迎关注获取
Last Updated: 2022/1/11 上午11:46:13