前端学习路线

前端开发核心是用户界面实现与交互逻辑开发，主流技术栈围绕 HTML、CSS、JavaScript 展开，再延伸至框架、工程化、跨端等进阶内容。

目标：掌握前端页面的结构、样式、基础交互，能独立编写静态页面。

HTML
- 核心：标签语义化（header/footer/article 等）、表单元素（input/select/textarea）、多媒体标签（img/audio/video）。
- 重点：理解 DOM 树结构，掌握常用属性和事件绑定基础。
- 练习：写一个个人简历页面、登录注册表单。
CSS
- 核心：选择器优先级、盒模型（margin/border/padding）、浮动与清除浮动、Flex 布局、Grid 布局（现代布局核心）。
- 进阶：定位（relative/absolute/fixed）、响应式设计（media query）、CSS3 动画（transition/animation）。
- 练习：用 Flex 实现导航栏布局，用 Grid 实现卡片网格，写一个适配手机和电脑的页面。
JavaScript
- 基础：变量与数据类型、运算符、条件判断、循环、函数（参数、返回值、作用域、闭包）。
- 核心：DOM 操作（增删改查元素）、BOM 操作（window/location/history）、事件委托、异步编程（callback/Promise/async/await）。
- 练习：实现表单验证（非空、手机号格式）、轮播图、倒计时功能。

目标：掌握主流框架 和工程化工具，能开发复杂单页应用（SPA）。

前端框架（二选一，优先 Vue 或 React）
- Vue 系列
  - 基础：Vue 2/3 核心语法（指令、组件、生命周期、Props、插槽）。
  - 进阶：Vue Router（路由管理）、Vuex/Pinia（状态管理）、axios（网络请求）。
  - 优势：上手快，文档友好，国内中小企业使用率高。
- React 系列
  - 基础：JSX 语法、函数组件、Hooks（useState/useEffect 等）、组件通信。
  - 进阶：React Router、Redux/Redux Toolkit（状态管理）、axios。
  - 优势：生态丰富，适合大型项目，大厂使用率高。
- 练习：开发一个 Todo List、电商商品列表页、用户中心。
工程化工具
- 包管理器：npm/yarn/pnpm（安装依赖、管理包版本）。
- 构建工具：Vite（新一代极速构建工具，推荐）、Webpack（传统构建工具，了解核心概念）。
- 代码规范：ESLint（代码检查）、Prettier（代码格式化）。
- 目标：理解项目打包流程，能通过脚手架（create-vite/create-react-app）快速初始化项目。

目标：突破技术瓶颈，适配更复杂的业务场景，对标中高级前端岗位。

跨端开发
- 小程序：微信小程序、支付宝小程序（掌握原生语法或 Taro/uni-app 跨端框架）。
- 移动端 App：React Native（React 生态）、Flutter（跨平台 UI 框架，需学 Dart）。
性能优化
- 前端优化：资源压缩（JS/CSS/ 图片）、懒加载、预加载、CDN 加速、减少回流重绘。
- 框架优化：Vue/React 组件性能优化（虚拟列表、缓存组件）、路由懒加载。
前端安全
- 常见问题：XSS 攻击、CSRF 攻击、跨域问题（CORS/JSONP）。
- 解决方案：掌握 Token 认证、HttpOnly Cookie、CSP 策略。
其他必备技能
- TypeScript：强类型语言，提升代码可维护性，大厂必备。
- UI 框架：Element UI（Vue）、Ant Design（React）、Tailwind CSS（原子化 CSS 框架）。

目标：积累可展示的项目经验，写进简历加分。

入门级项目
- 个人博客、响应式官网、天气查询小程序。
进阶级项目
- 电商平台（商品展示、购物车、订单管理）。
- 管理后台（权限控制、数据表格、表单编辑器）。
项目注意事项
- 代码规范：使用 ESLint+Prettier，目录结构清晰。
- 功能完整：实现核心业务逻辑，处理边界情况（如空数据、网络错误）。
- 部署上线：用 Vercel、Netlify 或阿里云等平台部署，生成在线链接。

学习资源
- 文档：MDN（前端基础权威）、Vue 官网、React 官网。
- 视频：B 站（尚硅谷、黑马程序员）、慕课网。
- 刷题：LeetCode（JavaScript 基础题）、牛客网（前端面试题）。
求职准备
- 简历：突出项目经验和技术栈，附上 GitHub 链接和项目在线地址。
- 面试：重点复习 JS 异步、闭包、原型链，框架原理，工程化，性能优化等知识点。