手把手带你实现“京东到家”，锤炼技能、收获作品

只学会理论知识还远远不够，掌握能落地的技术才更有核心竞争力

章节目录

第1章 Vue 语法初探 试看

本章中，将会通过编写实际例子，带你对Vue的语法有个粗浅的认知，让大家结合例子，有一些自己的疑问，从而带着问题继续学习，以便于更好的理解和掌握后面的知识点。
共 5 节 收起列表
1-1 课前须知，这里有你需要了解的一切试看
1-2 初学编写 HelloWorld 和 Counter
1-3 编写字符串反转和内容隐藏小功能
1-4 编写TodoList 小功能，了解循环和双向绑定试看
1-5 组件概念初探，对 TodoList 进行组件代码拆分

第2章 Vue 基础语法

本章中，将会讲解生命周期函数，指令，模版，数据，侦听器，事件，循环渲染等基础语法知识点，帮助大家理解第一章重写过的代码，同时理解数据驱动的编程思想。
共 16 节 收起列表
2-1 Vue 中应用和组件的基础概念
2-2 理解 Vue 中的生命周期函数（1）
2-3 理解 Vue 中的生命周期函数（2）
2-4 常用模版语法讲解（1）
2-5 常用模版语法讲解（2）
2-6 数据，方法，计算属性和侦听器（1）
2-7 数据，方法，计算属性和侦听器（2）
2-8 样式绑定语法
2-9 条件渲染
2-10 列表循环渲染（1）
2-11 列表循环渲染（2）
2-12 事件绑定（1）
2-13 事件绑定（2）
2-14 表单中双向绑定指令的使用（1）
2-15 表单中双向绑定指令的使用（2）
2-16 表单中双向绑定指令的使用（3）

第3章 探索组件的理念

本章中，将会通过对组件概念，以及组件之间代码组织，数据传递的内容讲解，帮助大家完整理解组件的设计理念，让大家能够合理的拆分管理组件，写出易于维护的 Vue 代码。
共 13 节 收起列表
3-1 组件的定义及复用性，局部组件和全局组件（1）
3-2 组件的定义及复用性，局部组件和全局组件（2）
3-3 组件间传值及传值校验
3-4 单向数据流的理解
3-5 Non-Props 属性是什么
3-6 父子组件间如何通过事件进行通信（1）
3-7 父子组件间如何通过事件进行通信（2）
3-8 组件间双向绑定高级内容（选学）
3-9 使用插槽和具名插槽解决组件内容传递问题（1）
3-10 使用插槽和具名插槽解决组件内容传递问题（2）
3-11 作用域插槽
3-12 动态组件和异步组件
3-13 基础语法知识点查缺补漏

第4章 Vue 中的动画

本章中，将会通过讲解单元素单组件的动画，与多元素的切换动画，以及状态动画等，帮助大家了解在 Vue 中，如何借助一定的封装，实现 CSS 和 JS 动画，让大家能够快速实现酷炫的动态效果。
共 7 节 收起列表
4-1 使用 Vue 实现基础的 CSS 过渡与动画效果
4-2 使用 transition 标签实现单元素组件的过渡和动画效果（1）
4-3 使用 transition 标签实现单元素组件的过渡和动画效果（2）
4-4 使用 transition 标签实现单元素组件的过渡和动画效果（3）
4-5 组件和元素切换动画的实现
4-6 列表动画
4-7 状态动画

第5章 Vue 中的高级语法 试看

本章中，将会着重介绍 Vue 中混入，插件，自定义指令等扩展语法，以及 render 函数，Teleport 传送门等高级语法，帮助大家更加深入的了解 Vue 原理以及扩展性原则，让大家能够具备一定的高级封装能力。
共 8 节 收起列表
5-1 Mixin 混入的基础语法（1）
5-2 Mixin 混入的基础语法（2）
5-3 开发实现 Vue 中的自定义指令（1）
5-4 开发实现 Vue 中的自定义指令（2）
5-5 Teleport 传送门功能
5-6 更加底层的 render 函数（选学）试看
5-7 插件的定义和使用
5-8 数据校验插件开发实例

第6章 Composition API

本章重，将会给大家全面介绍 Vue3 新提供的 Composition API 语法，帮助大家学会优雅合理的使用新版本 Vue 语法。在本章中，还通过小例子的形式帮助大家进行实操联系，确保大家能够学以致用，为之后的实战课程做好准备。
共 12 节 收起列表
6-1 Setup 函数的使用
6-2 ref，reactive 响应式引用的用法和原理（1）
6-3 ref，reactive 响应式引用的用法和原理 （2）
6-4 toRef 以及 context 参数（1）
6-5 toRef 以及 context 参数（2）
6-6 使用 Composition API 开发TodoList（1）
6-7 使用 Composition API 开发TodoList（2）
6-8 computed方法生成计算属性
6-9 watch 和 watchEffect 的使用和差异性（1）
6-10 watch 和 watchEffect 的使用和差异性（2）
6-11 生命周期函数的新写法
6-12 Provide,Inject,模版 Ref 的用法

第7章 Vue 项目开发配套工具讲解

在开发真实大型项目之前，本章中，将会给大家讲解 Vue 配套的一些开发工具的使用方式，包括 VueCLI 脚手架工具的使用，Axios 请求发送库的使用，Vue-Router 路由概念以及 VueX 数据状态管理工具等。通过本章的学习，针对复杂Vue 工程的开发的最后一些难题，大家就可以轻松解决掉啦。...
共 10 节 收起列表
7-1 VueCLI 的使用和单文件组件（1）
7-2 VueCLI 的使用和单文件组件（2）
7-3 使用单文件组件编写 TodoList
7-4 Vue-Router 路由的理解和使用（1）
7-5 Vue-Router 路由的理解和使用（2）
7-6 VueX 的语法详解（1）
7-7 VueX 的语法详解（2）
7-8 VueX 的语法详解（3）
7-9 CompositionAPI 中如何使用 VueX
7-10 使用 axios 发送ajax 请求

第8章 “京东到家”项目首页开发

本章中，将会带大家通过首页布局的开发，了解 Vue 基础语法在实战中的使用方法，过程中帮助大家对组件化，组件设计，SCSS 样式编写技巧，BEM CSS 设计模式有更深入的理解。通过本章学习，大家不仅可以完成页面的布局开发，还能学习到很多代码设计的技巧。...
共 11 节 收起列表
8-1 工程初始化
8-2 工程目录代码简介及整理
8-3 基础样式集成及开发模拟器的使用
8-4 flex + iconfont 完成首页 docker 样式编写
8-5 使用Scss 组织地址区域布局
8-6 利用CSS技巧实现搜索及 banner 区域布局
8-7 使用 flex布局实现图标列表布局
8-8 首页布局收尾
8-9 首页组件的合理拆分
8-10 使用v-for, v-html 指令精简页面代码
8-11 CSS 作用域约束以及 Vue 开发者工具的安装使用

第9章 登陆功能开发

本章中，将会通过登录注册功能的实现，带大家理解路由守卫和更多高级路由使用技巧，帮助大家理解前端登陆鉴权的基本逻辑。同时带领大家深入学习如何Composition API 的新语法上，合理的进行逻辑拆分，增加项目的可维护性，提高大家的工程能力。...
共 9 节 收起列表
9-1 登陆页面布局开发
9-2 路由守卫实现基础登陆校验功能
9-3 注册页面开发及路由串联复习
9-4 使用axios 发送登陆 Mock 请求
9-5 请求函数的封装
9-6 Toast 弹窗组件的开发
9-7 通过代码拆分增加逻辑可维护性
9-8 Setup函数的职责以及注册功能的实现（1）
9-9 Setup函数的职责以及注册功能的实现（2）

第10章 商家展示功能开发（上）

在本章中，我们将通过商家详情页面的布局和基础逻辑实现，带大家巩固复习基础部分的更多语法，同时讲解请求数据如何通过 watchEffect 来巧妙实现，这一章节难度适中，请同学们认真学习为复杂知识点做好准备，大家加油！
共 13 节 收起列表
10-1 首页附近店铺数据动态化-详情页准备
10-2 动态路由，异步路由与组件拆分复用（1）
10-3 动态路由，异步路由与组件拆分复用（2）
10-4 搜索布局及路由跳转（1）
10-5 搜索布局及路由跳转（2）
10-6 路由参数的传递以及商家详情的获取（1）
10-7 路由参数的传递以及商家详情的获取（2）
10-8 商家页面核心样式开发（1）
10-9 商家页面核心样式开发（2）
10-10 样式的优化与代码复用（1）
10-11 样式的优化与代码复用（2）
10-12 商家详情页分类及内容联动的实现
10-13 使用 watchEffect 巧妙的进行代码拆分

第11章 商家展示功能开发（下）

本章难度明显提升，通过商品详情页面与购物车数据的联动功能，讲解了在 Vue3 中处理复杂业务逻辑的编码思路，帮助大家深入学习使用了 VueX 以及 Composition API 中各种新语法的实战场景。同时讲解了路由的异步加载等高级实战内容，是整个实战项目中复杂度最高的一章节。...
共 16 节 收起列表
11-1 购物车的样式开发
11-2 Vuex中购物车数据结构的设计（1）
11-3 Vuex中购物车数据结构的设计（2）
11-4 使用 computed 完成订单价格计算
11-5 购物车及列表双向数据同步功能开发（1）
11-6 购物车及列表双向数据同步功能开发（2）
11-7 根据购物车选中状态计算订单金额（1）
11-8 根据购物车选中状态计算订单金额（2）
11-9 全选及清空购物车的功能实现（1）
11-10 全选及清空购物车的功能实现（2）
11-11 商家详情页面代码优化（1）
11-12 商家详情页面代码优化（2）
11-13 购物车数据结构的变更（1）
11-14 购物车数据结构的变更（2）
11-15 通过 LocalStorage 实现购物车信息持久存储（1）
11-16 通过 LocalStorage 实现购物车信息持久存储（2）

第12章 核心购物链路开发

本章将会承上启下，以购物车为出发点，开始下单流程开发，帮助大家完成购物链路的完整开发。通过本章的学习，同学们可以完成一个比较完整的电商交易流程的开发。过程中进一步对代码进行拆解复用，帮助大家强化开发过程中的设计思想。...
共 15 节 收起列表
12-1 确认订单页面创建及顶部布局（1）
12-2 确认订单页面创建及顶部布局（2）
12-3 订单商品列表数据获取与布局（1）
12-4 订单商品列表数据获取与布局（2）
12-5 页面布局及展示逻辑开发（1）
12-6 页面布局及展示逻辑开发（2）
12-7 确认订单页面组件拆分及弹框布局制作（1）
12-8 确认订单页面组件拆分及弹框布局制作（2）
12-9 购物流程开发完成（1）
12-10 购物流程开发完成（2）
12-11 下单流程开发优化
12-12 订单列表页布局开发（1）
12-13 订单列表页布局开发（2）
12-14 订单列表逻辑开发（1）
12-15 订单列表逻辑开发（2）

第13章 真机调试及工程发布流程

本章将会带大家通过真实手机进行项目的测试，发现测试中的问题，进行问题的解决处理，在测试无误后，带大家了解开发后的代码发布流程，帮助大家理解 Vue 项目发布的基本原理。本章内容学习过后，大家对 Vue3 的开发，调试，上线，将具备全面丰富的理解。...
共 4 节 收起列表
13-1 如何进行真机调试
13-2 解决真机调试过程中的展示问题
13-3 实现项目对不同设备的展示适配
13-4 项目上线和课程总结
本课程已完结