先问值不值得学

做企业级前端项目，光会写 Vue 组件不够，还得懂工程化、路由、状态管理和接口对接。这门课用一个完整电商系统把 Vue 全家桶串起来，从零搭建到首页落地，场景明确，练习有反馈，适合已经熟悉 Vue 基础语法、想补工程化实战经验的前端开发或转行者。它不是入门概念课，而是把散落的知识点用真实业务场景串起来，让你在真正能干活之前就见过典型坑并学会怎么绕过去。课程覆盖 Vue 全家桶在企业级电商场景里的核心用法，学完后你可以独立完成前端项目初始化、组件化首页开发、基础路由与状态管理、接口联调与跨域处理，并能用工程化思路继续向下扩展订单、商品、用户等模块。资料里的每一章都可以当作参考手册，遇到实际问题时按需回看，而不是从头到尾线性背诵。建议把学习过程拆成两阶段：先把基础架构部分过一遍，理解为什么做这些封装，再进入首页开发，边看边复现，遇到跨域或接口问题时对照练习更顺手。

适合什么基础、学习门槛在哪里

需要 Node 环境和 Git 基础概念，代码库用 VSCode 操作。资料里环境配置、Git 配置、VueCli 安装、跨域处理、路由封装、存储封装、Mock 设置、接口拦截等章节，都是为后续页面开发打地基的。门槛主要在：要有 JavaScript 基础和 Vue 组件思想，不必精通，但要愿意花时间把工程化流程从头到尾走一遍。如果你已经了解 Vue 的基本语法和响应式原理，可以直接跳到项目实战部分；如果对环境配置不熟悉，建议先把 Node 环境和 Git 命令部分过一遍，避免后续因为工具链问题卡住。课程的设计思路是「先搭台，再唱戏」，第 4 章的基础架构部分虽然看起来有些抽象，但它是后面所有页面开发的根基，不能跳过。

建议先看哪几块、学完能独立做什么

优先看课程导学、Node 环境配置、Git 与 SSH 配置、VueCli 使用、目录结构、路由封装、接口封装与 Mock。这几块决定了你能不能独立跑起项目、能不能把页面和接口连起来。课程覆盖 Vue 全家桶在企业级电商场景里的核心用法，学完后你可以独立完成前端项目初始化、组件化首页开发、基础路由与状态管理、接口联调与跨域处理，并能用工程化思路继续向下扩展订单、商品、用户等模块。资料里的每一章都可以当作参考手册，遇到实际问题时按需回看，而不是从头到尾线性背诵。建议把学习过程拆成两阶段：先把基础架构部分过一遍，理解为什么做这些封装，再进入首页开发，边看边复现，遇到跨域或接口问题时对照练习更顺手。最终产出是一份完整的电商首页项目，可以作为你的作品集，也能为后续深入学习更复杂的前端架构打下坚实基础。

课程目录

第1章 课程简介 试看 3 节 | 28分钟 1-1 课程导学 (11:17).mp4
 1-2 Node环境安装 (09:40).mp4
 1-3 Node升降级 (06:38).mp4
 第2章 Git安装和配置 6 节 | 73分钟 2-1 Git的安装 (08:58).mp4
 2-2 Git配置 (09:04).mp4
 2-3 Git配置SSH公钥 (19:31).mp4
 2-4 VSCode操作Git (10:48).mp4
 2-5 Git常用命令 (24:25).mp4
 2-6 【讨论题】关于Git我们应该掌握哪些知识？.mp4
 第3章 Vue Cli4.0安装和使用 3 节 | 36分钟 3-1 VueCli4.0安装 (04:55).mp4
 3-2 VueCli4.0使用 (18:31).mp4
 3-3 Vue-DevTools安装使用 (12:34).mp4
 第4章 项目基础架构 

14 节 | 184分钟 4-1 跨域-CORS (08:44).mp4
 4-2 跨域-JSONP (08:14).mp4
 4-3 跨域-接口代理 (12:08).mp4
 4-4 接口梳理 (08:36).mp4
 4-5 目录结构设置 (13:53).mp4
 4-6 基本插件介绍 (05:42).mp4
 4-7 【常见问题解析】swiper和vue-axios问题.mp4
 (06:23) 4-8 路由封装 (25:43).mp4
 4-9 Storage封装 (26:05).mp4
 4-

10 接口错误拦截 (19:07).mp4
 4-

11 接口环境设置 (20:02).mp4
 4-12 Mock设置（1） (18:42).mp4
 4-13 Mock设置（2） (10:35).mp4
 4-14 【讨论题】前端应该如何搭建基础架构？.mp4
 第5章 商城首页 试看 

20 节 | 325分钟 5-1 Nav-Header组件（1） (30:57).mp4
 5-2 Nav-Header组件（2） (19:48).mp4
 5-3 Nav-Header组件（3） (19:53).mp4
 5-4 Nav-Header组件（4） (24:15).mp4
 5-5 【补充说明】接口服务调整 (01:15).mp4
 5-6 Nav-Header组件（5） (26:09).mp4
 5-7 Nav-Footer组件 (11:50).mp4
 5-8 Service-Bar组件 (14:11).mp4
 5-9 首页轮播功能实现 (23:56).mp4
 5-10 首页轮播菜单实现（1） (17:03).mp4
 5-11 首页轮播菜单实现（2） (20:41).mp4
 5-

12 首页广告位实现 (08:51).mp4
 5-13 手机商品实现（1） (25:26).mp4
 5-14 手机商品实现（2） (11:08).mp4
 5-15 Modal组件实现（1） (21:20).mp4
 5-16 Modal组件实现（2） (20:38).mp4
 5-

17 Modal动画实现 (17:13).mp4
 5-

18 Modal交互补充 (01:23).mp4
 5-

19 图片懒加载实现 (08:56).mp4
 5-20 【讨论题】对于商城首页我们开发思路是什么？.mp4
 第6章 登录页面 2 节 | 37分钟 6-1 登录交互实现 (26:50).mp4
 6-2 拉取用户信息 (09:33).mp4
 第7章 Vuex集成 3 节 | 34分钟 7-1 初步了解Vuex (12:19).mp4
 7-2 Vuex框架搭建 (06:26).mp4
 7-3 Vuex实战应用 (15:11).mp4
 第8章 产品站页面 6 节 | 79分钟 8-1 产品站参数组件实现 (16:35).mp4
 8-2 组件吸顶实现 (15:07).mp4
 8-3 视频模块实现 (15:40).mp4
 8-4 Slide动画实现（1） (05:24).mp4
 8-5 Slide动画实现（2） (11:32).mp4
 8-6 产品站交互实现 (14:07).mp4
 第9章 商品详情页面 1 节 | 25分钟 9-1 商品详情交互实现 (24:12).mp4
 第10章 购物车页面 6 节 | 62分钟 10-1 Order-Header组件 (16:41).mp4
 10-2 购物车列表渲染 (20:23).mp4
 10-3 购物车全选和非全选 (05:29).mp4
 10-4 购物车商品更新和删除 (11:56).mp4
 10-5 购物车结算 (07:22).mp4
 10-6 【讨论题】完整的购物车应该包含哪些功能点？.mp4
 第11章 ElementUI集成 4 节 | 72分钟 11-1 ElementUI入门梳理 (20:06).mp4
 11-2 ElementUI运用 (14:39).mp4
 11-3 Babel介绍 (14:51).mp4
 11-4 退出功能实现 (22:24).mp4
 第12章 订单确认页面 6 节 | 95分钟 12-1 订单父组件结构封装 (11:10).mp4
 12-2 地址和商品数据加载 (21:14).mp4
 12-3 地址删除功能实现 (17:11).mp4
 12-4 新增地址表单静态实现 (16:02).mp4
 12-5 新增地址交互实现 (15:46).mp4
 12-6 地址编辑和订单提交 (12:58).mp4
 第13章 订单结算 4 节 | 84分钟 13-1 订单详情数据加载 (15:49).mp4
 13-2 支付宝支付对接 (23:07).mp4
 13-3 微信支付对接 (22:31).mp4
 13-4 微信支付状态轮询 (22:16).mp4
 第14章 订单列表 6 节 | 84分钟 14-1 调整Order父组件结构 (11:18).mp4
 14-2 订单列表数据渲染 (16:36).mp4
 14-3 Loading和NoData优化 (10:06).mp4
 14-4 订单列表分页-分页器 (17:06).mp4
 14-5 订单列表分页-加载更多 (09:13).mp4
 14-6 订单列表分页-滚动加载 (18:46).mp4
 第15章 上线部署 

10 节 | 101分钟 15-1 保留分页器 (02:54).mp4
 15-2 vue.config配置介绍 (19:08).mp4
 15-3 路由按需加载方案(1) (05:59).mp4
 15-4 路由按需加载方案(2) (12:19).mp4
 15-5 删除预加载-真正按需 (12:34).mp4
 15-6 服务器部署准备工作 (13:50).mp4
 15-7 Nginx安装和配置 (19:15).mp4
 15-8 Node环境搭建 (05:03).mp4
 15-9 项目部署 (09:34).mp4
 15-10 【讨论题】项目开发完成后，如何部署到线上，需要注意什么？.mp4
 第16章 课程总结 1 节 | 25分钟 16-1 课程总结 (24:14).mp4
 第17章 Vue3特性概览和Composition API运用 6 节 | 101分钟 17-1 关于Vue3内容升级你想知道的都在这里 (09:24).mp4
 17-2 Vue历程和Vue3设计目标 (19:34).mp4
 17-3 Vue3环境搭建、项目创建以及Vite使用 (23:29).mp4
 17-4 Vue3开发To-Do功能，初探 Composition API（上） (14:31).mp4
 17-5 Vue3开发To-Do功能，初探 Composition API（中） (13:01).mp4
 17-6 Vue3开发To-Do功能，初探 Composition API（下） (20:15).mp4
 第18章 Vue2->Vue3项目升级指南及框架改造 3 节 | 46分钟 18-1 Vue2升级Vue3指南 (11:09).mp4
 18-2 商城核心框架升级 - 进入实战（上） (17:00).mp4
 18-3 商城核心框架升级 - 进入实战（下） (16:53).mp4
 第19章 登录和首页升级实战开发 6 节 | 98分钟 19-1 登录页面 - Vue3改造 (26:50).mp4
 19-2 首页 - Vue3改造（上） (15:14).mp4
 19-3 首页 - Vue3改造（下） (14:44).mp4
 19-4 globalProperties - 巧用（上） (20:36).mp4
 19-5 globalProperties - 巧用（下） (07:05).mp4
 19-6 Vue3升级课程总结 (12:49).mp4