前端学习资料集合

针对前端的学习，不同阶段采用的方式是不一样的。本文把前端的学习分为入门、实战、进阶三个阶段。下面分开来说

一、入门阶段

入门阶段的目标是学会前端的基本语法和知识，能够解决一些简单的问题。这个阶段不建议看书学习，效率太慢。这个阶段不追求知识广度，只要求能够快速上手就行。建议直接找一些介绍前端的基础知识的视频课程来看。推荐一个比较经典的课程。

1. 前端 基础班 就业班 实战项目全套课程
2. 聊聊前端开发的基础知识
3. 4小时带你快速入门React全家桶
4. 黑马程序员vue前端基础教程-4个小时带你快速入门vue入门系列博客

二、实战阶段

这个阶段主要是要增加自己的知识广度，这个阶段就要多看书多做项目，理论和实践相结合，提升自己的理论水平和实战经验。

关于书籍方面，推荐如下基本

1、Vue.js设计与实现(豆瓣评分9.5)

本书深入探讨了Vue.js的设计思想及其内部实现原理，书中不仅讲解了Vue的基本使用，还分析了其响应式系统、组件机制及路由等高级特性。适合有一定基础的开发者，希望理解Vue.js背后的逻辑与设计思维。

2、深入浅出Vue.js(豆瓣评分7.9)

本书以浅入深的方式介绍Vue.js框架，涵盖了基础知识到高级应用，包括组件化开发、Vue Router、Vuex等。在易于理解的语言下，帮助读者循序渐进地掌握Vue.js的使用，是新手学习Vue的良好参考书籍。

3、React 学习手册(豆瓣评分8.6)

这是一本系统介绍React框架的书籍，内容涵盖React的基本概念、组件生命周期、状态管理，以及如何与其他库和框架结合使用。适合初学者和开发者，帮助他们快速上手和掌握React的核心思想与技能。

4、深入React技术栈(豆瓣评分7.9)

本书针对中高级开发者，深入剖析React生态中的相关技术栈，包括Redux、React Router和React 迁移等。提供了大量实例和最佳实践，帮助开发者在实际项目中高效使用React及其周边工具。

关于教学课程方面的推荐

1. vue3.2+vite+vant企业实战开发阅读app
2. ReactNative从0到1系统精讲与小红书APP实战
3. Vue3+ElementPlus+Koa2 全栈开发后台系统
4. [全栈]Vue3+NestJS 全栈开发企业级管理后台
5. React结合React Hook实战大型项目
6. Vue3最佳项目实践
7. Three.js可视化企业实战WEBGL课

这几个视频课程都是关于项目实战方面的，没什么好介绍的，跟着课程把里面的项目实战都实践一遍，对提升编程技能很有帮助。

关于项目方面的推荐

Github上也有很多优秀适合用于练手实战的项目，这里推荐几个比较优秀的。

1、sl1673495/vue-netease-music

一个基于 Vue2 和 Vue-CLI3 的高仿网易云 Mac 客户端播放器。使用了 Vue 全家桶、Sass、better-scroll、ElementUI 等技术实现。

2、SmallRuralDog/vue3-music

一个使用 Vue3+TS 开发的音乐播放器，界面模仿 QQ 音乐 Mac 客户端，支持黑夜模式。

3、dxx/react-bilibili

高仿B站 Web 移动端，基于 SSR 服务端渲染模板，使用 React 16.8，Typescript 开发，后端服务使用 Express 实现。

4、uniquemo/react-netease-music

一个基于 React、TypeScript 的高仿网易云 Mac 客户端播放器。使用 React Hook 做状态管理，没有使用额外的数据管理库。除此之外，还使用到了CSS Modules、Webpack、Graphql 等技术。

实战方面博客推荐

Vue系列

1. 【前车之鉴】Vue，你真的熟练了么？
2. 聊一聊 Vue3 的 9 个知识点
3. vue cli项目打包优化，我能做的就这些了
4. vue-cli3 项目从搭建优化到docker部署
5. Vue+VantUI严选电商项目移动端实战项目
6. 手把手教你写一个脚手架
7. Vue3+ElementPlus+Koa2 全栈开发后台系统​​
8. 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧
9. Vue3.0高阶实战开发高质量音乐Web app
10. Vue.js 开发实践：实现精巧的无限加载与分页功能
11. vue3从入门到开发商城实战系统性学习课程
12. vue中Axios的封装和API接口的管理
13. 前端Vue3.0从0到1手把手撸码搭建管理后台系统
14. Web 仿 App 动画竟然引出了“性能杀手”
15. VueCli3实战项目-还原饿了么订餐app
16. Vue学习看这篇就够了
17. Vue.js 3.0 核心源码解析深入分析核心源码透彻理解
18. 「Vue实践」武装你的前端项目
19. VueSSR高阶指南
20. 带你五步学会Vue SSR
21. 面试题：你能写一个Vue的双向数据绑定吗？
22. （4.2万字 重启2020）“从零到部署”Vue全栈电商应用系列教程---正式完结
23. Vue 项目里戳中你痛点的问题及解决办法（更新）
24. 仿 vue-cli 搭建属于自己的脚手架
25. Vue中你不知道但却很实用的黑科技
26. vue插件开发、文档书写、github发布、npm包发布一波流
27. 带你全面分析vue-router源码（万字长文）
28. Vue友最爱的10个开箱即用的开源项目
29. vue多页面开发和打包的正确姿势
30. Vue-cli原理分析
31. Vue源码阅读前必须知道javascript的基础内容
32. 三个很不错的 Vue 资料
33. 前端路由简介以及vue-router实现原理
34. Vue 3 源码导读
35. 吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧《上》
36. Single-Spa + Vue Cli 微前端落地指南 + 视频 (项目隔离远程加载，自动引入)
37. Vue+微前端(QianKun)落地实施和最后部署上线总结
38. vue2 + koa2 + webpack4 的SSR之旅
39. 面试官：自己搭建过vue开发环境吗？
40. Vue3 + TS + Vite2 + Electron16项目梳理
41. 基于Electron + nodejs + 小程序 实现弹幕小工具
42. 手把手教你 Electron + Vue 搭建前端桌面应用
43. Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】

React系列

1. 你应该尝试的 8 个 React 库
2. React Native 跨端APP 探花交友 项目实战
3. 200行代码实现简版react
4. React 22从入门到实战开发移动端学习平台
5. Redux + React-router 的入门 和配置 ‍ 教程
6. React17+TS4+React Hook仿Jira企业级项目
7. React服务端渲染+pm2自动化部署
8. React17系统精讲结合TS打造旅游电商平台
9. 【长文慎入】一文吃透 React SSR 服务端渲染和同构原理
10. 最新React从入门进阶到企业级实战项目
11. ReactNative 学习资源大汇集
12. React 深入浅出搞定知识链路和底层逻辑
13. React 开发必须知道的 34 个技巧【近1W字】
14. 分享 50 个完整的 React Native 项目
15. React SSR 详解【近 1W 字】+ 2个项目实战
16. React路由鉴权
17. react进阶」一文吃透React高阶组件(HOC)
18. 掘金最污的 React16.x 图文视频教程(2万5千字长文-慎入)
19. Vue 转 React不完全指北
20. React + TypeScript实践
21. 还不开始学react吗？| react 入门必知必会知识点(万字总结✍)
22. React Hooks 详解 【近 1W 字】+ 项目实战
23. 三千字讲清TypeScript与React的实战技巧
24. 你要的 React 面试知识点，都在这了
25. 「React进阶」 React全部api解读+基础实践大全(夯实基础2万字总结)
26. 「react进阶」年终送给react开发者的八条优化建议(篇幅较长，占用20-30分钟)
27. 学习 React.js 比你想象的要简单
28. 一篇文章总结redux、react-redux、redux-saga
29. React 中 setState 是一个宏任务还是微任务？
30. 「React18新特性」深入浅出用户体验大师—transition
31. 这可能是最通俗的 React Fiber(时间分片) 打开方式
32. 可能是你需要的 React + TypeScript 50 条规范和经验
33. React精髓！一篇全概括(急速)
34. 30分钟精通React Hooks
35. 你真的了解 React 生命周期吗
36. 为何我们要用 React 来写小程序 - Taro 诞生记
37. 适合Vue用户的React教程，你值得拥有
38. 怎样学习React？当然是自己动手实现一个React啦
39. 「react进阶」一文吃透react-hooks原理
40. 高频前端面试题汇总之React篇（下）
41. 图解ES6中的React生命周期
42. React Hooks 最佳实践

三、进阶阶段

进阶阶段主要就是加深自己的知识深度，不仅要强化自己编程高阶技能，比如性能优化、项目选型架构等技能，更要提升自己的编程理论水品。这个阶段更多的就是要追求看书和学习一些比较难度较高的课程和项目。

关于书籍的推荐

1、高性能JavaScript(豆瓣评分9.0)

本书专注于提高JavaScript应用性能的策略和技巧，涵盖了负载优化、响应速度、内存管理和异步编程等方面。书中结合实际案例，帮助开发者写出更高效的JavaScript代码，实现更流畅的用户体验。

2、你不知道的JavaScript（上卷）(豆瓣评分9.4)

这是一套深入剖析JavaScript语言的书籍，着重于那些即使是有经验的开发者也可能不太了解的细节和概念。包括作用域、闭包、异步编程等主题，使读者在深刻理解JavaScript内核的基础上提升编程能力。

3、JavaScript语言精粹(豆瓣评分9.2)

本书针对JavaScript的核心概念进行深入解析，阐述语言特性、用法及常见问题。通过简洁和实用的方式，帮助读者建立对JavaScript语言的全面理解，适合希望深入学习JavaScript基础和实用技巧的开发者。

关于课程的推荐

1. 进阶必备web前端架构全套课程
2. JavaScript核心原理解析
3. 最新webpack原理与实践
4. Node透析底层原理深入浅出
5. 大厂前端性能优化最佳实践
6. 前端全流程性能优化实战极致性能流程体验
7. 图解 Google V8 一门课搞懂 JavaScript 执行逻辑
8. Vue.js 3.0 核心源码解析深入分析核心源码透彻理解
9. React 深入浅出搞定知识链路和底层逻辑

这几门课程都涉及到了性能能优化方面的知识，对于了解前端底层原理有较大的帮助。

关于进阶的博客的推荐

1. 前端性能优化 掌握行业实用专业前沿的解决方案
2. 设计无限滚动下拉加载，实践高性能页面真谛
3. 5 分钟撸一个前端性能监控工具
4. 狙杀页面卡顿 —— Performance 指北
5. 前端全流程性能优化实战极致性能流程体验
6. 前端性能优化三部曲(加载篇)
7. 前端性能优化之加载技术
8. 记Chrome的性能分析工具实践
9. 聊一聊前端性能优化
10. 「前端进阶」高性能渲染十万条数据(时间分片)
11. 前端黑科技：美团网页首帧优化实践
12. 「前端进阶」高性能渲染十万条数据(虚拟列表)
13. 看完离编写高性能的JavaScript又近了一步
14. 从 8 道面试题看浏览器渲染过程与性能优化
15. 首页白屏的引发的思考(一)
16. 工作中如何进行前端性能优化(21种优化+7种定位方式)
17. 前端性能优化 24 条建议
18. 写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践
19. 前端性能优化的常用手段
20. 前端性能优化指南
21. 前端性能优化总结
22. 前端工程师面试题(性能优化)
23. 这些前端性能优化的知识我从来不告诉别人
24. 浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]
25. 三十分钟掌握Webpack性能优化
26. 浏览器工作原理及web 性能优化（上）
27. 揭秘 Vue.js 九个性能优化技巧
28. 网站性能优化