---
url: /courses/web-frontend-framework/index.md
---
# Web 前端框架开发

本课程采用 Vue 3 技术路线，帮助你从基础页面开发过渡到组件化、工程化和框架化开发，掌握使用 Vue、Vite、Vue Router、Element Plus、Axios 与 Pinia 构建交互式 Web 应用的方法。

课程以“常用知识点 + 项目实训 + 交付能力”为主线，通过学习计划表、任务板、商品管理、后台布局、接口列表和微商城前后台等案例递进，最终形成可运行、可演示、可提交的项目成果。

::: tip 课程目标
完成课程后，你不只要“会写 Vue 语法”，还要能按需求拆组件、组织路由、处理接口状态、管理共享数据，并用 Git、README 和演示材料完成一次可复现交付。
:::

## 课程定位

《Web 前端框架开发》是软件技术专业的重要专业课程，主要衔接 HTML、CSS、JavaScript 等前置知识，并服务于后续全栈项目开发、移动端开发和企业级前端项目实践。

通过本课程学习，你应能够：

* **能看懂**：理解 Vue 项目结构、组件文件、响应式数据与常用指令；
* **能修改**：按需求修改页面、样式和交互，并根据控制台证据处理基本报错；
* **能编写**：独立完成组件、路由页面、表单、接口请求与 Pinia 状态；
* **能交付**：形成可运行项目、Git 提交记录、运行说明、测试记录与演示材料。

## 课程依据与版本基线

课程内容依据《Vue.js 前端开发实战（第 2 版）》教学大纲与课程导学方案重组。教材原有 8 个学习单元保持为知识骨架，课堂按真实前端工程流程重排为“环境 → 响应式 → 组件 → 路由 → UI → 接口 → 状态 → 综合项目”。

课程示例以 Vue 3、Vite、单文件组件和 `<script setup>` 为基线。涉及安装命令和运行环境时，以项目 `package.json`、lock 文件与官方文档为准：

* [Vue 官方教程：简介](https://cn.vuejs.org/guide/introduction.html)
* [Vite 官方指南](https://vite.dev/guide/)
* [Vue Router 官方指南](https://router.vuejs.org/guide/)
* [Pinia 官方指南](https://pinia.vuejs.org/)
* [Element Plus 官方文档](https://element-plus.org/)
* [Axios 官方文档](https://axios.rest/)

::: warning 版本说明
教材截图、课堂项目和官方文档可能来自不同时间。不要混用 Vue 2、旧 Vue CLI 和当前 Vue 3 + Vite 写法；每次排错先确认实际依赖版本和当前项目构建工具。
:::

## 开始学习前

先说明你的 JavaScript 基础、开发环境和项目目标。课程会把结果保存为本机学习画像，帮助课程助教选择合适的示例与排错步骤。

{{intake-survey:web-frontend-framework-intake}}

## 学习路径

完成 Vue 3 + Vite 项目初始化，理解目录结构、运行链和响应式页面。

学习组件边界、Props / Emits、生命周期、插槽和 Element Plus 表单业务。

学习 Vue Router、后台布局、Axios 请求四态、Pinia 状态与工程规范。

完成微商城前台与管理端，形成项目仓库、运行文档、测试记录和演示答辩。

## 课程内容

| 顺序 | 章节 | 阶段成果 |
| --- | --- | --- |
| 1 | [从静态页面到 Vue 工程](./01.course-start-and-environment.md) | 可运行 Vue 3 项目与环境排错记录 |
| 2 | [让数据驱动页面](./02.reactivity-and-template.md) | 响应式学习计划表 |
| 3 | [把页面拆成会协作的组件](./03.components-and-data-flow.md) | 组件化任务板 |
| 4 | [用路由组织页面与访问入口](./04.router-layout-and-access.md) | 后台布局、动态路由与守卫 |
| 5 | [用 Element Plus 完成业务界面](./05.element-plus-business-ui.md) | 商品表格与编辑表单 |
| 6 | [让页面可靠地连接接口](./06.axios-api-state.md) | 接口四态与请求封装 |
| 7 | [共享状态与工程化交付](./07.pinia-and-engineering.md) | 购物车 Store 与可复现仓库 |
| 8 | [微商城综合项目与交付](./08.commerce-project-delivery.md) | 微商城前后台、文档与答辩 |

每个教学单元建议按“概念讲解 + 代码演示与跟练 + 独立任务、二次改造与反馈”组织。所有知识点都要形成可检查的代码或说明证据。

## 学习成果

完成本课程后，你应能够独立完成以下任务：

1. 创建、运行、构建并解释 Vue 3 + Vite 项目；
2. 根据业务职责拆分组件并设计 Props / Emits 接口；
3. 使用路由组织公共页面、嵌套布局、动态详情与访问入口；
4. 使用 Element Plus 完成列表、表单、弹窗和校验；
5. 使用 Axios 封装接口并处理加载、成功、空数据和失败；
6. 使用 Pinia 管理真正需要跨页面共享的业务状态；
7. 根据 Console、Network 和 Vue Devtools 证据定位常见问题；
8. 通过 Git、README、测试记录和现场演示完成项目交付。

## 课程助教

课程助教会优先依据本页学习路径、前端知识点和课程经验回答，可用于解释组件边界、梳理数据流和定位常见工程问题。

{{assistant-invite:web-frontend-framework-overview-tutor}}