# 前端开发

**Repository Path**: gethug/front-end-development

## Basic Information

- **Project Name**: 前端开发
- **Description**: 《Web前端开发》课程教学资源网站
- **Primary Language**: HTML
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2026-03-02
- **Last Updated**: 2026-04-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端开发

### 介绍
《Web前端开发》课程教学资源网站


### 教学资源
+ 课程项目： https://gitee.com/gethug/front-end-development.git
+ HTML手册： https://www.w3school.com.cn/html/index.asp
+ CSS 手册： https://www.w3school.com.cn/css/index.asp
+ HTML+CSS 教程: https://www.bilibili.com/video/BV1MvaVzUEuz
+ BootStrap 教程： https://www.w3school.com.cn/bootstrap5/index.asp


### 教学计划

---

#### 📅 第一阶段：Web 基石与响应式设计（第 1 - 3 周）

**核心目标：** 掌握 HTML5/CSS3，能独立完成复杂且适配移动端的静态页面。

* **第 1 周：HTML5 与 Web 标准**
    * **L1：** 课程概论、开发环境（VS Code 插件配置）、HTTP 协议基础、HTML5 语义化（SEO 意义）。
    * **L2：** 表单增强、Canvas 入门、音视频处理、Web 存储（LocalStorage/SessionStorage）。


* **第 2 周：CSS3 核心与核心布局**
    * **L3：** 盒子模型精讲、层叠上下文（Z-index 陷阱）、BFC 原理、传统浮动布局回顾。
    * **L4：** **Flexbox 弹性布局**实战（导航栏、圣杯布局）、CSS 变量、过渡与动画（Transition/Animation）。


* **第 3 周：现代布局与响应式**
    * **L5：** **CSS Grid 网格布局**深度应用、多栏布局实现。
    * **L6：** 媒体查询（Media Queries）、移动端适配（Rem/Vw 方案）、响应式实战：从 PC 到手机的无缝转换。



---

#### 🚀 第二阶段：JavaScript 程序设计深度进阶（第 4 - 6 周）

**核心目标：** 攻克 JS 难点，培养真正的“前端逻辑感”。

* **第 4 周：JS 语法精粹与 ES6+**
    * **L7：** 数据类型底层逻辑（堆栈）、作用域链、闭包（Closure）及其应用场景。
    * **L8：** ES6+ 必会特性：解构赋值、剩余参数、**Arrow Functions**、类（Class）与继承。


* **第 5 周：DOM/BOM 与交互逻辑**
    * **L9：** 高性能 DOM 操作、事件流机制（冒泡与捕获）、事件委托优化。
    * **L10：** 浏览器对象模型（BOM）、定时器深入（防抖与节流 Debounce/Throttle）。


* **第 6 周：异步编程与网络通信**
    * **L11：** **Promise A+ 规范解析**、Async/Await 优雅异步。
    * **L12：** 原生 Ajax 与 Fetch API、跨域（CORS/JSONP）原理及解决方案、拦截器思路。



---

#### 🛠 第三阶段：Node.js 后端思维与工程化（第 7 - 8 周）

**核心目标：** 理解前端基石，具备全栈视角和自动化工具使用能力。

* **第 7 周：Node.js 环境与模块化**
    * **L13：** CommonJS 与 ESM 模块规范、NPM/PNPM 包管理、脚本自动化。
    * **L14：** Express 框架快速上手：路由设计、中间件机制、模拟 RESTful API 服务。


* **第 8 周：构建工具与界面库**
    * **L15：** **Vite/Webpack** 原理浅析、模块热更新（HMR）、打包优化策略。
    * **L16：** 界面库实战：基于 Element Plus 或 Ant Design 的 UI 快速构建方案。



---

#### ⚛️ 第四阶段：Vue 3 渐进式框架精讲（第 9 - 11 周）

**核心目标：** 进入企业级开发模式，掌握组件化设计思想。

* **第 9 周：Vue 核心原理与指令**
    * **L17：** **Vue 3 响应式原理（Proxy）**、Setup 语法糖、ref 与 reactive 深度对比。
    * **L18：** 常用指令、条件/循环渲染优化、计算属性（Computed）与侦听器（Watch）。


* **第 10 周：组件系统深度开发**
    * **L19：** 组件通信全方案（Props/Emit/V-model/Provide-Inject）。
    * **L20：** 插槽（Slots）高级用法、生命周期钩子函数、自定义 Hooks（逻辑复用）。


* **第 11 周：全家桶应用（Router & Pinia）**
    * **L21：** **Vue Router**：动态路由、嵌套路由、路由守卫（登录态校验）。
    * **L22：** **Pinia** 状态管理：Store 设计模式、持久化存储、全局状态同步。



---

#### 🏁 第五阶段：前端性能与质量保障（第 12 周）

**核心目标：** 提升代码质量，做好项目前的最后准备。

* **第 12 周：工程实践与项目指导**
    * **L23：** 前端代码规范（ESLint/Prettier）、TypeScript 基础（类型声明在 Vue 中的应用）。
    * **L24：** 性能指标（Lighthouse）、错误监控与异常处理、期末大作业需求发布与技术选型指导。



---

#### 📝 教学策略说明：

1. **分层教学：** 前 6 周夯实基础，防止学生在后面框架学习中“由于不懂 JS 基础而产生挫败感”。
2. **上机特色：** 每次课的前 45 分钟讲解知识点，后 75 分钟进行针对性的 Coding 练习。
3. **衔接建议：** 第 12 周结束时，我会提供 3-5 个不同方向的期末项目模板，供学生在课后的一周内独立或结对完成。