前端三个月速成学习路线与面试核心考点
目前转行互联网的人群中,前端因入门门槛相对较低且薪资可观而备受关注。关于网上流行的'三个月零基础搞定前端'说法,关键在于是否有清晰的学习路线和针对性的面试准备。以下整理了高效学习框架和面试要点,供参考。
阶段一:基础三件套(2 周)
- HTML5(3 天) - 语义化标签/表单验证/多媒体标签 - DOM 树结构/SEO 基础原则
- CSS3(5 天) - Flex 布局/Grid 布局(重点掌握) - 响应式设计(媒体查询/rem 布局) - 动画效果/CSS 变量 - 预处理语言(Sass/Less 选学)
- JavaScript(6 天) - ES6+ 核心(箭头函数/解构/Promise/async-await) - 原型链/闭包/事件循环(重点理解) - 模块化开发(CommonJS/ES Module) 技巧:直接通过 MDN 文档 + CodePen 实战,避免看长篇视频
阶段二:框架攻坚(2 周)
- Vue3(10 天) - Composition API + setup 语法 - Vue Router/Pinia 状态管理 - 组件通信/生命周期 - 实战:TodoList/购物车
- React(4 天) - Hooks 核心(useState/useEffect) - 组件化思想 - 与 Vue 对比学习(差异化理解) 重点:Vue 官方文档 + 技术实战案例,配套 Element Plus 组件库
阶段三:工程化体系(1 周)
- 构建工具 - Vite 基础配置(比 Webpack 优先学习) - npm/yarn/pnpm 包管理
- 代码规范 - ESLint/Prettier 配置 - Git 基础操作(分支管理/PR 流程)
- 网络基础 - Axios 封装/拦截器 - RESTful API 设计规范 - HTTP 缓存策略/CORS
阶段四:项目实战(3 周)
- 电商后台管理系统(10 天) - 权限控制(动态路由) - 图表集成(Echarts) - 表单验证(VeeValidate) - 典型功能:商品 CRUD/数据可视化
- 仿头条资讯平台(7 天) - 无限滚动加载 - 富文本编辑器(WangEditor) - 第三方登录
- 移动端 H5 项目(4 天) - Vant 组件库 - 适配方案(vw/vh) - 微信 JS-SDK 基础
阶段五:面试冲刺(2 周)
- 八股文重点 - 浏览器原理(渲染流程/事件循环) - 性能优化(Lighthouse 实操) - 框架原理(Vue 响应式/Virtual DOM) - 网络安全(XSS/CSRF/HTTPS)
- LeetCode 专项 - 手写题:防抖节流/深拷贝/Promise - 算法:二叉树遍历/链表操作(剑指 Offer 精选) - 设计题:Modal 组件/图片懒加载

JavaScript
- 不会冒泡的事件有哪些?
- mouseEnter 和 mouseOver 有什么区别?
- MessageChannel 是什么,有什么使用场景?
- async、await 实现原理
- Proxy 能够监听到对象中的对象的引用吗?
- 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功?
- 下面代码会输出什么?


