01
项目导学与环境搭建
课程介绍 · 项目效果演示 · 技术栈选型 · Python/Node.js/Git 环境搭建
导学环境
02
HTML5核心基础
语义化标签 · 文档结构 · 表单/表格/多媒体 · HTML5新特性
语义化多媒体
03
CSS3核心基础
选择器 · 盒模型 · 浮动定位 · Flex · Grid
布局FlexGrid
04
JavaScript核心基础
变量/数据类型 · 运算符 · 流程控制 · 函数 · 对象/数组 · DOM操作
DOMES6
05
项目初始化与版本控制
需求分析 · 目录结构 · Git初始化 · .gitignore · 首次提交
Git项目规范
06
UI设计稿解析与切图
Figma/PS解读 · 设计规范 · 切图导出 · 图标字体
Figma切图
07
项目脚手架搭建
Webpack/Vite · Babel · ESLint/Prettier · 开发服务器
ViteWebpack
08
CSS预处理器实战
Sass/SCSS · 变量/混合 · 嵌套 · 模块化 · 项目应用
Sass模块化
09
响应式布局实战
媒体查询 · 流式布局 · rem/vw · 移动端适配 · 断点设计
响应式移动端
10
组件化开发思想
组件概念 · 拆分原则 · Props/State · 通信 · 复用
组件化设计模式
11
Vue3核心基础 (上)
Vue3简介 · Composition API · setup · ref/reactive · 计算属性/侦听器
Vue3Composition
12
Vue3核心基础 (下)
条件/列表渲染 · 事件处理 · 表单绑定 · 生命周期钩子
渲染生命周期
13
Vue Router实战
路由配置 · 动态/嵌套路由 · 导航守卫 · 路由元信息
路由导航守卫
14
Pinia状态管理
Pinia简介 · Store定义 · State/Getter/Action · 模块化Store
Pinia状态管理
15
Axios网络请求封装
Axios配置 · 请求/响应拦截器 · 错误处理 · API模块化
Axios拦截器
16
项目登录模块开发
登录UI · 表单验证 · Token管理 · 路由鉴权 · 持久化
登录JWT
17
项目首页模块开发
首页布局 · 轮播图 · 数据请求 · 骨架屏 · 错误状态
首页轮播
18
项目列表页模块开发
列表布局 · 分页 · 搜索 · 筛选 · 排序
列表分页
19
项目详情页模块开发
详情布局 · 图片预览 · SKU选择 · 加入购物车
详情SKU
20
项目购物车模块开发
购物车列表 · 数量增减 · 选中/取消 · 价格计算 · 本地存储
购物车本地存储
21
项目订单模块开发
订单确认 · 地址管理 · 提交订单 · 订单列表/详情
订单地址
22
项目个人中心模块开发
个人信息 · 编辑资料 · 头像上传 · 收藏/足迹
个人中心上传
23
后台管理系统 (上)
后台布局 · 菜单导航 · 用户/角色/权限管理
后台权限
24
后台管理系统 (下)
商品管理 · 订单管理 · 数据统计 · ECharts图表
ECharts数据
25
项目性能优化
代码分割/懒加载 · 图片优化 · 缓存 · CDN · 打包分析
性能CDN
26
项目测试
单元测试(Vitest) · 组件测试 · E2E测试(Cypress)
测试Vitest
27
项目部署与CI/CD
服务器选购 · Nginx · 域名/HTTPS · GitHub Actions自动化
部署CI/CD
28
项目总结与复盘
架构回顾 · 技术难点复盘 · 常见问题 · 优化方向
复盘总结
29
面试准备与简历优化
项目亮点 · 面试题解析 · 简历技巧 · 模拟面试
面试简历
30
扩展与进阶
微前端 · Serverless · PWA · Electron · Flutter
进阶跨平台