更新时间:2022-08-12 21:51:12
经常有同学会问我,学到什么程度可以找到一份前端工作
,或者会问如何入门前端
,学习到什么程度可以胜任业务开发
以及前端如何进阶等问题。别急!!!下面我们来把前端学习分为几个阶段,帮助你如何从一个小白成为前端大佬
。每个阶段会附上每个阶段的学习资源
,请大家认真仔细阅读哦 ????。重要提醒:能自学的小伙伴真的不建议大家报班学习!!!
工欲善其事,必先利其器。
⭐️ 前端开发必备工具:
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
学习:这个也是重点,而且初级前端面试好像特别喜欢问这个⭐️ ajax 请求
ajax
学习:ajax 通过原生的XMLHttpRequest
对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON
格式的数据,XML 格式已经过时了。学习推荐文档:http://javascript.ruanyifeng.com/bom/ajax.html
有些同学喜欢看书,但是市面上的书千千万万,这里推荐三本比较适合前期学习想要巩固下基础知识
的同学:
《JavaScript 高级程序设计》
《JavaScript 忍者秘籍》
《JavaScript设计模式与开发实践》
???? 想要这三本书电子版的同学可以到我的公众号内回复 js书籍
即可免费无套路获取
⭐️ js高级进阶
https://ke.qq.com/course/231577?taid=1464811481434265
(7-12 节讲的递归,预编译,作用域、作用域链精解,立即执行函数,闭包,原型,原型链,call/apply,继承模式,命名空间,对象枚举
) 我刚开始学习的时候也是看的这个,讲的很不错!!!⭐️ ES6新特性❗❗❗
https://es6.ruanyifeng.com/
⭐️ 浏览器
1000%
的时间都是在和浏览器打交道,必须要了解它⭐️ HTTP
⭐️Git 版本控制
https://mp.weixin.qq.com/s/gdqVcrrY3h948UMGlfF3qA
为什么要学习框架???因为框架可以提高我们的
开发效率
、简化代码的复杂度
。
⭐️ CSS 框架
Less,Sass,Stylus
不能算是框架吧,可以归纳为 css 预处理器。三者语法类似,学习一种使用其它基本上结合文档能够运用。
Tailwind
是一个用于快速 UI 开发
的实用工具集 CSS 框架,设计理念是以实用为先,它提供了高度可组合的应用程序类,可帮助开发者轻松构建复杂的用户界面。它还提供了一个从实用模式中提取组件的工具,响应式风格可以满足不同设备上的开发。
⭐️ javaScript 框架
(找工作必备)
这里主要介绍 Vue React
两个框架,这两个是目前使用最多
的框架。Angular
目前不推荐,使用的公司寥寥无几,还有就是后起之秀Svelte
,起码初学者目前不建议学习吧
⭐️ 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 全家桶
Dvajs
Mobx
,为什么要推荐这两个库,用过 redux 的人都知道,完整的一套写下来,要写还多代码,而这两个库就是专门简化它的,目前也是使用比较多的。React
(整体架构)react-route
(路由)redux
(状态管理)axios
(请求库)redux-saga
(redux 中间件)less/scss
(css 预处理器)Ant Design
(蚂蚁 UI 框架库,90% react 开发都使用这个)react hook
目前开发主流,必看❗❗❗重点来了,重磅级实战教程
:《React17+React Hook+TS4 ***实践,仿 Jira 企业级项目》
,废话不多说,公众号后台回复【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
】即可获取视频教程
⭐️ 可视化
最近几年可视化真的太火了,有不少公司都是专门做这块,这里推荐几个比较好用的可视化框架:
⭐️ 服务端渲染
Vue
React
Vue React
这两个框架任意会一种,js
基础再学的好点,⭐️ 恭喜你 ⭐️ 基本上可以找到一份很不错的工作了。
⭐️ 打包构建工具:前端资源打包压缩编译等
webpack
(重点)Vite
(https://vitejs.cn/)Rollup
???? ⭐️webpack官网
:https://webpack.docschina.org/
???? Vite官网
:https://vitejs.cn/
???? Vite入门到精通
:公众号回复【Vite
】获取视频教程
⭐️ Nodejs: 一种 javascript 的运行环境,能够使得 javascript 脱离浏览器运行
???? Node.js 官方教程
:http://nodejs.cn/learn
???? Node.js 入门
:https://cnodejs.org/getstart
???? ⭐️Node.js+Koa2实战
:公众号回复【Node
】获取视频教程
⭐️ 包管理:用于安装 Node.js 的扩展、工具等。
⭐️ 性能优化
⭐️ 数据结构算法
???? ⭐️数据结构算法
:公众号回复【数据结构算法
】获取视频教程
⭐️ CI/CD
Jenkins
: 自动化构建工具⭐️ Nginx
HTTP
和反向代理
web 服务器⭐️ Linux
⭐️ 小程序、多平台开发:
uniapp:
公众号回复【uniapp
】获取教程
taro
⭐️ 混合开发 App:
react-native
uniapp
Flutter
⭐️ 桌面应用:
Electron
⭐️ qiankun:
⭐️ sign-spa
以上就是针对前端入门到进阶再进阶的路线了,其实还有很多,这里就不一一讲解。前端路漫漫,各位骚年,你准备好了吗
求职是一个漫长的过程,千万不要为了想要早点上班工作或者为了2-3K薪水的差距而选择了自己不理想的工作。建议结合自身的发展,给自己设定一个长远的目标和计划。
面经汇总
:https://www.nowcoder.com/discuss/205497
字节大佬总结的面试题
:公众号内回复【面试题】简历模板获取
:公众号内回复【简历】这里推荐几个自己比较喜欢看的一些社区平台
微信公众号
掘金
MDN
MSDN
***
InfoQ
Github
目前我比较喜欢刷这几个,没事在休息的时候刷一刷,还是能提升自己很多知识的积累的????????????