第 4 部分 · Vue 3 前端

用 Vue 3 实现商城前端。本部分以**组合式 API（Composition API）**为主线，全部代码在 web-vue/ 目录。

本部分你会学到

章节	内容	产出
Vue 3 核心概念	响应式、模板语法、组合式 API	掌握组件化开发
Vite 工程搭建	创建工程、配置代理、目录规范	可运行的 web-vue 工程
Vue Router 与 Pinia	路由跳转、全局状态	页面导航 + 登录态管理
商城前端页面实现	商品列表/详情、购物车、订单	商城 Vue 端核心页面
Element Plus 与工程化	组件库、Axios 封装、ESLint	规范的企业前端工程

项目目录（目标）

web-vue/
├── src/
│   ├── api/          # 接口请求封装
│   ├── assets/       # 静态资源
│   ├── components/   # 通用组件
│   ├── router/       # 路由配置
│   ├── stores/       # Pinia 状态
│   ├── types/        # TS 类型
│   ├── utils/        # 工具函数
│   ├── views/        # 页面
│   ├── App.vue       # 根组件
│   └── main.ts       # 入口
├── index.html
├── vite.config.ts
├── package.json
└── tsconfig.json

学习方式

本部分与 第 5 部分 功能完全对齐——同一个商城、同一套后端 API。建议先把 Vue 通读一遍，再对照 React 篇看差异，收获最大。