2026 前端工程师完整学习路线图（含免费课程与开源书）
阿杰 · 2026-10-26 · 学习教程 · 浏览 18621 · 下载 3421
从 HTML/CSS 到工程化、框架原理与性能优化，一份路线图覆盖 6 个阶段，附配套免费资料清单。
更多资源
- Figma 中文 UI Kit 组件库（200+ 组件，自动布局）
含移动端与后台管理两套规范，组件全部支持 Variants 与自动布局，可直接商用。
分类：设计素材 - PicSharp 图片压缩客户端 v2.1（Win / Mac 跨平台，开源免费）
批量压缩 JPEG/PNG/WebP，支持无损模式与自定义尺寸，压缩率平均 68%，无上传、本地处理。
分类：软件工具 - VS Code 效率插件合集（30+ 必备扩展与配置清单）
按“必装 / 按需 / 谨慎”三档整理，附一份可直接拷贝的 settings.json 配置。
分类：软件工具 - 开源技术书：《你不知道的 JavaScript》全系列（官方开源中文版）
作者主动开源的经典 JS 丛书，覆盖作用域、this、类型、异步与 ES6+，仓库直链可在线阅读。
分类：电子书籍 - Vue3 + TypeScript 后台管理系统模板（MIT 协议，可直接商用）
Vite5 + Vue3 + Pinia + Element Plus，内置权限路由、暗色主题、国际化与 20+ 业务页面。
分类：源码项目 - Python 数据分析实战笔记（Jupyter 全 12 章，含数据集）
从 Pandas 入门到特征工程与可视化，全部可运行，配套真实脱敏数据集。
分类：学习教程 - 可商用音效包 500 条（CC0 公共领域，无版权风险）
UI 交互、通知提示、环境音、转场音一应俱全，WAV + MP3 双格式，商用无需署名。
分类：音效配乐 - 100 套商务通用 PPT 模板（含图表页与时间轴）
16:9 宽屏，含封面、目录、数据图表、团队介绍、时间轴等通用页型，字体可替换为开源字体。
分类：办公模板 - Notion 个人知识管理模板（读书 / 项目 / 复盘三合一）
含数据库视图、自动化筛选与年度回顾面板，复制链接即可一键导入自己的 Notion 工作区。
分类：办公模板 - Flutter 跨端实战：从零做一个记账 App（含完整源码）
20 小节循序渐进，覆盖路由、状态管理、本地数据库、图表与打包发布全流程。
分类：源码项目 - 2026 设计配色手册：流行色卡与成套方案（PNG + ASE）
12 组成套配色方案，每组含主色、辅助色、语义色与深浅背景，可直接导入 PS / AI。
分类：设计素材 - Linux 服务器运维命令速查表（PDF + Markdown 双版本）
按场景分类的 180 条常用命令：进程、磁盘、网络、日志、权限、Docker 与故障排查。
分类：学习教程 - 开源图标库离线包：Lucide / Tabler / Bootstrap Icons
三套主流开源图标全量 SVG 打包，MIT 协议，含 React / Vue 组件用法示例。
分类：设计素材 - 公版有声书：经典睡前故事 30 篇（Public Domain 授权）
版权已过保护期的经典童话朗读音频，MP3 格式，适合做听书产品原型或给孩子听。
分类：音效配乐 - 前端面试复盘笔记 · 2026 版（含 120 道高频题与答题思路）
按 HTML/CSS/JS/框架/网络/工程化/算法分类，每题给出“一句话结论 + 展开 + 追问”。
分类：学习教程 - Docker 本地开发环境一键脚本（Node + MySQL + Redis）
一条命令拉起全套开发环境，含数据卷持久化与常见问题排查清单，适合新手入门容器化。
分类：源码项目 - 资源发布规范 v2.0（新人必读）
发布资源前请花 2 分钟看完：标题格式、必填信息、违规内容与删帖规则说明。
分类：其他资源