Video by Abbat Studio on Pexels
2190 字
11 分钟
前端工程师养成计划:从入门到面试,一站式学习资源全导航
本文同步自 CSDN · 清阿哥,原文发布于 2025-09-18。
前端工程师养成计划:从入门到面试,一站式学习资源全导航
写在前面:作为一名前端开发者,我深知基础知识(HTML、CSS、JavaScript)的重要性。框架可以速成,但底层基础决定了你的天花板。这份手册是我结合多年经验整理的学习路径和资源库,希望能为你的前端之旅保驾护航。星光不问赶路人,时光不负有心人,加油!
一、 学前准备:环境搭建
- Node.js 与版本管理 (nvm/n)
- Windows 系统 nvm & nrm 安装配置详解 - 详解如何在 Windows 上管理多个 Node.js 版本。
- Mac 系统 Node.js 管理工具
n使用指南 - Mac 用户优雅管理 Node.js 版本的工具。 - Node.js 安装包镜像地址 - 从国内镜像站快速下载 Node.js。
二、 基础入门:核心三件套
-
综合学习平台
- W3School - 经典的入门教程,适合快速查阅和练习。
- MDN Web Docs - 最权威的 Web 技术文档,前端开发者的圣经。
- 《前端开发规范》 - 了解良好的代码规范和团队协作习惯。
-
HTML
- HTML 元素语义化指南(阮一峰) - 写出更专业、更利于SEO的HTML。
- 精通 HTML 表格(阮一峰) - 深度讲解表格的各种用法。
-
CSS
- 布局
- Flex 布局教程:语法篇(阮一峰) - 理解 Flex 布局的核心概念。
- Flex 布局教程:实例篇(阮一峰) - 通过经典案例掌握 Flex 布局。
- 一行代码实现五种经典 CSS 布局 - 体验现代 CSS 的强大。
- Grid 布局教程 - 迈向二维布局自由。
- 全面 CSS 布局学习指南 - 汇总所有布局技术。
- 常用布局实战练习 - 通过模仿巩固布局技能。
- 特性与技巧
- CSS 选择器及优先级详解 - 必须掌握的底层规则。
- 不常见但实用的 CSS 属性 - 挖掘 CSS 的潜力。
- 你不知道的 CSS 技巧 - 提升开发效率的奇技淫巧。
- CSS Inspiration - 在这里找到写 CSS 的灵感!
- 张鑫旭的个人博客 - 国内 CSS 大佬,有很多深度文章。
- 动画与效果库
- Animate.css - 强大的即用型 CSS 动画库。
- Hover.css - 专为悬停效果设计的动画库。
- Animista - 在线预览、定制并生成 CSS 动画代码。
- Animated Backgrounds - 炫酷的 CSS 背景动画集合。
- SpinKit - 轻量级 CSS 加载动画(Loading Spinners)。
- CSS Loaders - 又一个可爱的加载动画库。
- guowc-基础动画库 - 个人开发的动画集合。
- 布局
-
JavaScript
- JavaScript 标准参考教程(阮一峰) - 经典的 JS 教程。
- 现代 JavaScript 教程 - 非常系统且现代的教程,强烈推荐。
- ES6 入门教程(阮一峰) - 重点学习,现代 JS 开发的基石。
- JS 底层原理:76张脑图 - 可视化地理解 JS 核心知识。
- HTML DOM 事件 - 深入理解事件机制。
- DOM 事件大全 - 便捷的查询手册。
- 廖雪峰的 JS 教程 - 另一份优秀的中文教程。
- N个实用的 JS 代码片段 - 收集来用的“工具包”。
-
正则表达式
-
TypeScript
- TypeScript 入门教程 - 从 JavaScript 程序员的角度理解 TS。
三、 框架与工程化
-
Vue.js
- 官方文档
- 源码学习
- Vue.js 技术揭秘 - 非常好的 Vue 2/3 源码解析。
- Vue.js 源码解析 - 逐行分析 Vue 2 源码。
- learnVue (GitHub) - 源码分析文章集合。
- 生态与资源
- Vue3 One Piece - Vue 3 生态资源集合站。
- 优秀开源项目(学习与参考)
- vue-element-admin - 基于 Vue 2 + Element UI 的后台管理系统典范。
- RuoYi-Vue - 基于 Vue 2/3 的权限管理系统,Java后端。
- mall - 全套电商系统,学习项目架构。
- Vben Admin - 现代 Vue 3 + Vite + Ant-Design-Vue 技术栈。
- vue-pure-admin - 简洁高效的 Vue 3 + Vite + Element-Plus 解决方案。
-
Git 版本控制
- 《前端 Git Commit 规范》 - 养成提交好习惯。
- 《Git 分支管理规范》 - 了解团队协作流程。
- Git 使用总结 - 个人整理的常用命令。
- Learn Git Branching - 强烈推荐,图形化交互式学习 Git,趣味十足!
- Git Flow 工作流详解 - 一种经典的分支管理模型。
- Git Flow 工作流学习 - 另一份不错的教程。
四、 学习平台与社区
- 日常学习与交流
- 掘金 - 国内高质量技术社区,干货多。
- SegmentFault 思否 - 技术问答社区。
- CSDN - 老牌IT社区,文章量巨大。
- 简书 - 轻度阅读。
- V2EX - 创意工作者社区,有大量程序员话题。
- 算法刷题
- 力扣 LeetCode - 准备面试,提升编程思维必刷。
- 资源导航
- 编程导航 - 帮你发现优质编程资源。
五、 综合资源与进阶学习
- 资源聚合网站
- 前端导航 - 一站式前端资源导航站。
- Awesome Open Source - 按语言分类的开源项目大全。
- 前端开发者手册 - 前端知识体系梳理。
- 博客站点集合 - 关注一些优秀作者的博客。
- 优秀 GitHub 仓库
- awesome-fe-study-source - 出色的前端学习资料集合。
- front-end-Doc - 前端文档汇总。
- GitHubDaily - 分享 GitHub 上高质量项目。
- xy-sea/blog - 前端知识体系博客。
- mqyqingfeng/Blog - 深入系列、专题系列、ES6 系列文章。
- 开发书籍
- 免费编程书籍搜索 - 寻找免费的编程中文书籍。
- 进阶指南
- 初中级前端进阶指南
- 2025 前端+大前端+全栈 知识体系(上)
- 2025 前端+大前端+全栈 知识体系(下)
- 只写后台管理怎么提升自我 - 解决很多人的职业困惑。
- 线上崩了?如何快速定位问题 - 学习排查线上问题的方法。
六、 开发工具
- 编辑器与IDE
- 文档编写
- Typora - 极简优雅的 Markdown 编辑器。
- 终端
- Cmder (Windows) - Windows 下高颜值终端。
- iTerm2 (macOS) - macOS 终端神器。
- 在线工具
七、 AI 提效
- 如何使用 AI
- OpenAI:GPT 最佳实践(解读版) - 学习如何向 AI 高效提问。
- AI 工具站
- VSCode AI 插件
- 通义灵码 (阿里) - 功能全面的国产插件。
- CodeGeeX - 清华团队的AI编程助手。
- Codeium - 免费且强大的替代品。
- Tabnine - 老牌 AI 补全工具。
- Baidu Comate - 百度推出的编程助手。
- ChatGPT 中文版 - VSCode 内直接调用 ChatGPT。
- AI 编辑器
- Cursor - 基于 AI 的代码编辑器,革命性体验。
- CodeBuddy (腾讯)
- Qoder (阿里)
- AI 教程
八、 面试准备
- 面试自我介绍 5 句话公式 - 掌握开场技巧。
- 前端面试宝典 - 按知识点分类的面试题。
- 前端面试派 - 双越老师带队创作,系统全面。
- 高频面试题汇总
学习路径建议
- 对于基础较弱的同学:
HTML/CSS->仿写静态页面->JavaScript->实现页面交互->Vue2->Vue2 + Element-UI + Axios 实战->独立开发一个功能全面的后台管理页面。 - 对于基础不错的同学:
直接从仿写页面开始,遇到问题再针对性补足知识点。JavaScript 是重中之重,需要持续深入学习。框架是延伸,底层是根本。 - 通用建议:
- 面向搜索引擎和 AI 编程:90% 的问题都能找到答案。
- 虚心请教:工作中遇到难题,及时与同事讨论。
- 总结记录:将解决的问题和理解的知识记录下来,内化成自己的东西。
- 拓展全栈技能:学一门后端语言(如 Node.js/Java/Go)是巨大的加分项。
前端工程师养成计划:从入门到面试,一站式学习资源全导航
https://qingge-cabana.vercel.app/posts/前端工程师养成计划从入门到面试一站式学习资源全导航-151833021/ 
评论 待开启
评论基于 GitHub Discussions(Giscus)。仓库推送并开启 Discussions 后,在 giscus.app 获取
repoId/categoryId,填入src/config.ts的giscusConfig即可。HHQ-666/qingge-blog