前端学习路线

一、前端三件套（HTML+CSS+JS）学习路线

第一阶段：HTML 基础

1. HTML 入门

   • 了解 HTML 基本结构和语法
   • 掌握常用标签：<div>, <p>, <h1>-<h6>, <a>, <img>, <ul>, <ol>, <li> 等
   • 理解语义化标签：<header>, <nav>, <main>, <section>, <article>, <footer> 等

2. HTML 进阶

   • 表单元素：<form>, <input>, <textarea>, <select> 等
   • 表格：<table>, <tr>, <td>, <th> 等
   • 多媒体：<video>, <audio>, <canvas> 等
   • HTML5 新特性：本地存储、地理定位、Web Worker 等

第二阶段：CSS 基础

1. CSS 入门

   • CSS 语法和选择器
   • 盒模型（Box Model）
   • 基本样式：颜色、字体、背景、边框等
   • 布局基础：浮动（float）、定位（position）

2. CSS 进阶

   • Flexbox 布局
   • Grid 布局
   • 响应式设计（媒体查询）
   • 动画和过渡效果
   • CSS 预处理器（Sass/Less）
   • CSS 变量和现代特性

第三阶段：JavaScript 基础

1. JavaScript 入门

   • 变量和数据类型
   • 操作符和表达式
   • 控制流（if-else, switch, 循环）
   • 函数（声明、表达式、箭头函数）
   • 数组和对象
   • DOM 操作基础

2. JavaScript 进阶

   • 面向对象编程（原型、类）
   • 异步编程（回调、Promise、async/await）
   • 闭包和作用域
   • 事件处理
   • AJAX 和 Fetch API
   • 模块化（CommonJS, ES6 Modules）
   • 错误处理

3. JavaScript 高级

   • 设计模式
   • 性能优化
   • 浏览器渲染原理
   • 安全问题（XSS, CSRF 等）
   • TypeScript 基础

二、Vue 框架学习路线

第一阶段：Vue 基础

1. Vue 核心概念

   • Vue 实例和生命周期
   • 模板语法
   • 计算属性和侦听器
   • 条件渲染和列表渲染
   • 事件处理
   • 表单输入绑定

2. Vue 组件

   • 组件注册和使用
   • 组件通信（props, $emit, 事件总线）
   • 插槽（Slots）
   • 动态组件
   • 混入（Mixins）

第二阶段：Vue 进阶

1. Vue 路由

   • Vue Router 基本使用
   • 路由配置和嵌套路由
   • 路由参数和查询
   • 导航守卫
   • 路由懒加载

2. Vue 状态管理

   • Vuex 核心概念（state, mutations, actions, getters）
   • 模块化
   • 插件和持久化

3. Vue 高级特性

   • 自定义指令
   • 过滤器
   • 渲染函数和 JSX
   • 插件开发
   • 服务端渲染（SSR）

第三阶段：Vue 生态

1. 构建工具

   • Vite 或 Vue CLI
   • 项目配置和优化
   • 打包和部署

2. UI 库和工具

   • Element Plus, Ant Design Vue 等
   • Axios 网络请求
   • Vue Test Utils 测试
   • ESLint 和 Prettier 代码规范

三、React 框架学习路线

第一阶段：React 基础

1. React 核心概念

   • JSX 语法
   • 组件和 props
   • 状态（state）和生命周期
   • 事件处理
   • 条件渲染和列表渲染
   • 表单处理

2. React 组件进阶

   • 函数组件 vs 类组件
   • 组件通信
   • 受控组件和非受控组件
   • 高阶组件（HOC）
   • 渲染属性（Render Props）

第二阶段：React 进阶

1. React Hooks

   • useState, useEffect
   • useContext, useReducer
   • useCallback, useMemo
   • 自定义 Hooks
   • Hooks 规则和最佳实践

2. React 路由

   • React Router 基本使用
   • 路由配置和嵌套路由
   • 路由参数和查询
   • 导航守卫
   • 路由懒加载

3. React 状态管理

   • Context API
   • Redux 核心概念（store, actions, reducers）
   • Redux Toolkit
   • MobX 简介

第三阶段：React 生态

1. 构建工具

   • Create React App
   • Vite
   • Webpack 配置
   • 打包和部署

2. UI 库和工具

   • Material-UI, Ant Design 等
   • Axios 网络请求
   • React Testing Library 测试
   • ESLint 和 Prettier 代码规范
   • TypeScript 集成

四、学习资源推荐

文档和教程

• MDN Web Docs（HTML, CSS, JavaScript）
• Vue 官方文档
• React 官方文档
• TypeScript 官方文档

在线学习平台

• 慕课网
• 网易云课堂
• B 站（哔哩哔哩）
• Coursera
• Udemy

实战项目

• 个人博客
• 电商网站
• Todo List 应用
• 天气应用
• 社交媒体应用

五、学习建议

1. 循序渐进：先掌握基础，再学习框架
2. 实践为主：通过项目巩固知识
3. 持续学习：关注前端技术发展
4. 代码规范：养成良好的编码习惯
5. 调试能力：掌握浏览器开发者工具
6. 性能优化：了解前端性能优化技巧