前端知识地图

这部分按照「能落地做项目」来组织，不追求只会概念。

你会在这里学到什么

1. 能独立完成中后台与官网类页面开发。
2. 能搭建前端工程并接入规范、测试、发布流程。
3. 能定位线上问题并做性能优化。
4. 能应对大多数常见面试题与实战场景。

专题目录

1. HTML/CSS：页面结构、布局、响应式、动画与可访问性。
2. JavaScript：语言核心、异步、原型链、模块化与实战技巧。
3. TypeScript：类型系统、泛型、工具类型、工程配置。
4. Vue：Vue 3 组合式 API、组件通信、状态管理与性能优化。
5. React：Hooks、状态管理、渲染机制、性能优化与架构实践。
6. Next/Nuxt：SSR/SSG/ISR、全栈路由、部署策略。
7. 工程化：规范、构建、测试、CI/CD、监控告警。

建议学习顺序

1. HTML/CSS
2. JavaScript
3. TypeScript
4. Vue 或 React（二选一主线，另一条补齐）
5. Next/Nuxt
6. 工程化

阶段目标

阶段一：页面与交互

• 独立实现响应式页面。
• 能完成表单、列表、弹窗、上传等高频组件开发。

阶段二：框架与数据流

• 能独立搭建 Vue/React 项目。
• 能设计组件边界、状态管理与接口层。

阶段三：上线与维护

• 能配置 lint、测试、自动化发布。
• 能做首屏优化、包体积优化、错误监控和性能追踪。

推荐项目练手

1. 管理后台（登录、权限、表格、图表、导入导出）。
2. 内容站点（SSR、SEO、静态生成、图片优化）。
3. 组件库（文档、单测、按需加载、版本发布）。