# vue教程-24级

**Repository Path**: wuhfly/vue-tutorial-grade24

## Basic Information

- **Project Name**: vue教程-24级
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-05-20
- **Last Updated**: 2026-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 24级全栈开发班 Vue3 教程

面向高职软件技术专业全栈开发方向大二学生，以实践为主，综合实战项目主题为简易电商前台。

### 前置要求

学生已具备 H5、CSS3、JavaScript、Node.js 基础。

### 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Vue 3 `<script setup>` 组合式 API |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia + pinia-plugin-persistedstate |
| 网络请求 | Axios |
| 数据模拟 | vite-plugin-mock |
| 构建工具 | Vite |
| 包管理 | yarn |

> Element Plus 组件库留暑期集训讲授，不在本教程范围内。

---

### 课程大纲

| 章节 | 内容 | 课时 |
|------|------|------|
| 第1章 Vue3入门 | 环境搭建、第一个应用、项目结构 | — |
| 第2章 Vue3基础 | 数据绑定、计算属性、侦听器 | — |
| 第3章 指令 | 常用指令、v-model、表单绑定 | — |
| 第4章 组件 | Props、Emit、插槽、生命周期 | — |
| 第5章 Vue Router 路由 | 单页应用、动态路由、嵌套路由、路由守卫 | 约14课时 |
| 第6章 Pinia 状态管理 | Store、state/getters/actions、持久化 | 约10课时 |
| 第7章 网络请求 | Axios封装、拦截器、Mock数据、环境变量 | 约10课时 |
| 第8章 综合实战项目 | 电商前台完整实现、打包与部署 | 约20课时 |

每章目录结构：**知识点文件 + 实践练习/**，每节遵循「目标 → 知识点 → 应用示例 → 实践练习」结构。

---

### 综合实战项目功能

第8章实现一个简易电商前台，包含五个页面：

| 页面 | 路由 | 说明 |
|------|------|------|
| 首页 | `/` | Banner 轮播、热门商品推荐 |
| 商品列表 | `/products` | 分类筛选、加载状态 |
| 商品详情 | `/product/:id` | 规格展示、加入购物车 |
| 购物车 | `/cart` | 数量修改、结算（需登录） |
| 登录 | `/login` | 表单校验、登录拦截跳转 |

---

### 常用命令

```bash
# 配置私有镜像（机房环境）
yarn config set registry http://npm.soft.com

# 创建项目
yarn create vue

# 安装依赖
yarn

# 启动开发服务器
yarn dev

# 打包
yarn build

# 预览打包结果
yarn preview
```