〖课程介绍〗:
慕课网首发，Vue3.0企业级项目实战。热门技术双剑合璧，Vue3.0 配合 TypeScript ，使用新版Vuex 和 Vue-Router 全家桶完成前后端分离复杂实战项目。一系列由易到难通用组件开发，让你学会一个基本的组件库的开发思路和技巧。接入真实后端API，告别 mock 数据，并提供Swagger 在线调试查询。抓住前后端分离开发痛点 - 权限管理，路由控制，全局Store 结构设计，前端缓存实现等。
* m: N: X) G }+ |( [! }; X
% D! ?/ O& {3 t! B; k) E〖课程目录〗:
! f3 C, {- U' Z( j. t# n) _: ^ 第1章 课程介绍
0 Q& Z$ F1 f* ^6 [3 \ 本章节介绍整个课程的内容，让大家了解课程的核心和安排。
6 d9 @# g& I7 \( ]9 ?2 a H
1-1 课程介绍（导学 ）试看
4 ?. }2 x; c- d% w/ O 1-2 代码库和在线文档使用注意事项（必看）
第2章 你好 Typescript： 进入类型的世界
本章主要帮助大家理解 TypeScript 可以解决的问题和所带来的优势，带领大家学习 TS 中的各种基础类型，然后进阶到复杂类型，包括：Array, Tuple, interface, function, Class, Enum, Generices等，迅速帮助大家理解 TS 的基础使用方式和语法。
3 n: ^% |& t# z6 L: a c
2-1 什么是 Typescript
?# C G) B& m5 D' ?! B: \ 2-2 为什么要学习 typescript
2-3 安装 typescript
2-4 原始数据类型和 Any 类型
. q$ W' T* L& E/ k 2-5 数组和元组
% p" R+ D+ c% C1 N; s r b7 r7 M 2-6 Interface- 接口 初探
: w" y6 a/ E! x" h9 v, P* z' F+ I 2-7 函数
2-8 类型推论 联合类型和 类型断言
2-9 class - 类 初次见面
2-10 类和接口 - 完美搭档
2-11 枚举（Enum）
2-12 泛型（Generics） 第一部分
# E4 s K: `/ g# a1 c8 l7 c5 g 2-13 泛型（Generics） 第二部分 - 约束泛型
5 m. R; B! Y8 q) I. D 2-14 泛型第三部分 - 泛型在类和接口中的使用
3 a7 X q5 r* u 2-15 类型别名，字面量 和 交叉类型
" s% I5 J+ U$ j* T 2-16 声明文件
2-17 内置类型
$ S) m3 e. b5 K" d7 @: ?# J 第3章 初识 Vue3.0： 新特性详解
$ n; z- x, u: _4 b 首先浏览 vue3 新带来的变化，然后从为什么会有 vue3 引出话题， 带领大家学习 compostion API，自定义Hooks，Teleport，Suspense 和 全局 API 修改等一系列 vue3 的重大更新。
3 b" G- y' ]2 r
& o7 ~3 f& x( a: K1 |9 G1 S 3-1 vue3 新特性巡礼
+ Q. G8 D" |! X) d/ Y 3-2 为什么会有 vue3
3-3 使用 vue-cli 配置 vue3 开发环境
0 c. r( F0 e, q# a& L1 N: Y: B7 B" t 3-4 项目文件结构分析和推荐插件安装
. }4 g- [% I2 K4 R6 t 3-5 vue3 - ref 的妙用试看
* K; b9 @, O2 ^* l! P, g 3-6 更近一步 - reactive
- b) w# H' K" O) ~ 3-7 vue3 响应式对象的新花样
3-8 老瓶新酒 - 生命周期
3-9 侦测变化 - watch
3-10 vue3 模块化妙用- 鼠标追踪器
5 L4 e) J* u M3 u 3-11 模块化难度上升 - useURLLoader
3-12 模块化结合typescript - 泛型改造
3-13 Typescript 对 vue3 的加持
3-14 Teleport - 瞬间移动 第一部分
3-15 Teleport - 瞬间移动 第二部分
3-16 Suspense - 异步请求好帮手第一部分
( w7 |3 t, X# P2 W, `4 J 3-17 Suspense - 异步请求好帮手第二部分
3-18 全局 API 修改
3 i& ` T% S! t6 g+ | 第4章 项目起航 - 准备工作和第一个页面
本章从项目的需求开始分析，然后确定项目的整体结构和代码规范，并且为项目选择 Bootstrap 作为样式库，编写 ColumnList 和 GlobalHeader 完成简单的练手以后，开始挑战第一个比较复杂的 Dropdown 下拉菜单组件，最后还抽象抽象出第一个 hooks 函数。...
0 y+ ~0 ?: u- N4 [3 r% W
5 ~9 i B1 t# e! x 4-1 项目起航 需求分析
( ^( A2 e+ ~& D3 r# K 4-2 文件结构和代码规范
C) V/ D& G: F" Z' Y4 S. @ 4-3 样式解决方案简介和分析
4-4 设计图拆分和组件属性分析
4-5 ColumnList 组件编码
4-6 ColumnList 组件使用 Bootstrap 美化
4 U Y5 G% l g! q6 o 4-7 GlobalHeader 组件编码
' P; ~4 o! }& r. V. I o, L& m 4-8 Dropdown 组件基本功能编码
( p7 E. @7 S+ N% q$ R: j( r% g2 @" P 4-9 Dropdown 组件添加 DropdownItem
0 `. v3 e/ u8 y* r6 b4 ^ 4-10 Dropdown 组件点击外部区域自动隐藏
: x( f/ F7 V% R0 c. x 4-11 useClickOutside 第一个自定义函数
! [7 s" l5 I& c% M6 ? 第5章 表单的世界 - 完成自定义 Form 组件
3 p8 Z. v2 V- W& Q* A 本章来到表单的世界，从头到尾非常完整的完成了一个带验证表单组件的全流程开发过程，在整个过程中，我们还学习到了 v-model，$attrs, slot，组件父子通讯 和 mitt 的各种知识点。
* P8 G# g7 I8 A7 Q9 V8 I
5-1 web 世界的经典元素 - 表单
* }$ N; m+ U# Q& i& S 5-2 ValidateInput 第一部分 — 简单的实现试看
3 }, l8 A# Y7 w5 Q) f c 5-3 ValidateInput 第二部分 —抽象验证规则
8 s9 E( W7 m+ ^( I+ u 5-4 ValidateInput 第三部分 — 支持 v-model
5 c# N( }$ c) I! g$ x 5-5 ValidateInput 编码第四部分 — 使用 $attrs 支持默认属性
5-6 ValidateForm 组件需求分析
5-7 ValidateForm 编码第一部分 - 使用插槽 slot
6 v9 w, d& M: p7 O! @) m 5-8 ValidateForm 编码第二部分 - 尝试父子通讯
5-9 ValidateForm 编码第三部分 - 寻找外援 mitt
5-10 ValidateForm 编码第四部分 - 大功告成
第6章 请你吃全家桶 - 初步使用 vue-router 和 vuex
g0 T7 \6 R; ]/ p 本章从 SPA 的概念引出，完成了 vue-router 的安装，然后学习它的基本使用，获取信息，动态跳转，前置守卫和元信息等各种知识点，然后又介绍了状态管理工具的具体定义，从而引出 vuex 的安装 和 它的 state，mutation，getter 等多个基本知识点。...
$ G( ~4 w5 k0 o! P n9 J4 ?
4 V" P. k4 m! u" \+ L8 ~ 6-1 什么是 SPA（Single Page Application） 应用？
" C' O, S: v1 U2 P. o) H( a 6-2 vue-router 安装和使用
6-3 vue-router 配置路由
* i# D/ u3 w, x5 q0 m 6-4 vue-router 添加路由
' }- Z0 R& t' n 6-5 添加 columnDetail页面
* M! }) J9 Y; F 6-6 状态管理工具是什么
) U; e' }& q/ F2 c, |( h) a 6-7 Vuex 简介和安装
6-8 Vuex 整合当前应用
8 M( K/ j" K; `( d/ s 6-9 使用 Vuex getters
% R! ]/ G( n; x( s# N5 U 6-10 添加新建文章页面
6-11 Vue router 添加路由守卫 - 前置守卫
C c) d0 ~; m3 H' K8 s 6-12 Vue router 添加路由守卫 - 使用元信息完成权限管理
$ A$ A# r: C' S9 z# ~) ?- K 第7章 前后端结合 - 项目整合后端接口
本章从 前后端分离和 RESTful 概念入手，介绍了为学生提供的 swagger 调试工具如何使用，然后引入 axios，通过 vuex action 的添加，实现 async 改造 和 axios 拦截器的基本用法，最后还抽象出一个 Loader 组件的编码和实现过程。
2 s# p$ e! W, }5 c7 Q7 t0 q1 @
5 g2 A6 w1 W) d 7-1 前后端分离开发是什么
3 R5 X3 r2 [: t0 k1 t3 y 7-2 RESTful API 设计理念
z _' g5 [' W8 C 7-3 使用 swagger在线文档查看接口详情
: @; T3 ~0 r8 u# a L 7-4 axios 的基本用法和独家后端API 使用（必看）
7-5 后端Icode终极使用方案
7-6 使用vuex action 发送异步请求
7-7 使用vuex action 发送异步请求第二部分
7-8 使用 async 和 await 改造异步请求
7-9 使用axios拦截器添加loading效果
M0 V' ^* a E8 ~- z2 t7 k 7-10 Loader 组件编码第一部分 - 基本实现
7-11 Loader 组件编码第二部分 - 使用 Teleport 进行改造
第8章 通行凭证 - 权限管理
5 q4 _' W- D/ c% h$ Y 本章从 获取 token 为起点，讲述了 JWT 通用身份验证工具的原理和实现，然后完成了 axios 设置通用header 和 持久化登录的处理方法，之后还添加了全局通用错误处理，最后抽象出一个通用组件 Message 的编码和实现过程。
8 e; @1 A9 U! i5 S' f2 m 8-1 登录第一部分 获取token
8-2 jwt 的运行机制
8-3 登录第二部分 axios 设置通用 header
8-4 登录第三部分 持久化登录状态
8-5 通用错误处理
8-6 创建 Message 组件
7 b: D+ e9 |2 g/ n 8-7 Message 组件改进为函数调用形式
/ p f7 B1 }, f, p5 t 8-8 作业：注册页面的编写
第9章 道高一尺 - 上传组件
本章实现了 Upload 组件从分析，编码的全过程，在这个过程中，我们将会学到：上传文件的原理，使用 axios 完成文件上传的方法，循序渐进的完成一个复杂组件的开发流程。
9-1 上传组件需求分析
9-2 上传文件的两种实现方式
( E- H! @( p6 T 9-3 (打点 时间) Uploader 组件第一部分
9-4 Uploader 组件第二部分
9-5 Uploader 组件第三部分：自定义模版
9-6 改进路由验证系统
6 {; Y7 O8 N8 z+ i 9-7 创建文章页面实现 Uploader 自定义样式
9-8 大功告成 创建文章最后流程
2 M; O; @8 Q6 M9 M, k 9-9 作业 完成文章详情页
4 @1 N- q! n+ j" Z" y$ s 第10章 最终的功能 - 编辑和删除文章
$ W0 b6 h4 l8 l& {. z 通过完成文章的编辑和删除功能，引出了之前组件留下的几个 bug，通过解决bug 带给大家持续优化的思路和方案，最后完成了一个通用 Modal 组件的编码过程。
" b4 v1 n) b9 w; ]
% `9 U! I9 [, j+ o& ^ 10-1 添加编辑和删除区域
) H, `, A$ _% y# M 10-2 修改文章编码 第一部分 - 改进 Uploader 组件
4 }3 R! L1 L6 f& L 10-3 修改文章编码 第二部分 - 改进 ValidateInput 组件
& d9 Q7 W' @1 V) S 10-4 修改文章编码 第三部分 - 完成编辑功能
, [& k4 h- O! J9 E$ \+ e 10-5 Modal组件编码
10-6 完成删除文章功能
第11章 持续优化
通过分析发现应用中可以优化的两个部分，提出并编码 数组改成对象 的store 优化方案以及防止重复请求的解决方案。最后还抽象除了 useLoadMore 的逻辑实现，最终完成了一个复杂的自定义 Hooks。
6 T. b! b3 [( x- a8 s# Y) ]
$ j1 |% ~' Z- P) p( A 11-1 可以优化的两个点
' c) T7 C) o' e! S% n) m9 D 11-2 完成帮助函数
8 \) T9 u/ @7 }6 ` 11-3 将 store 中的数组转换成对象
, K6 D2 o' ]7 W& R" J 11-4 防止重复请求逻辑分析
% s# u% V0 ?/ p, t1 g 11-5 缓存优化 第一部分
, v1 f1 H7 C; b2 k) K! [8 W3 p 11-6 缓存优化 第二部分
2 w: U' Q# {2 B+ l" O4 s) V0 o2 c 11-7 useLoadMore 实现分析
11-8 useLoadMore 编码
% G" k2 b; T4 |5 H6 T$ W3 F/ O 11-9 useLoadMore 在首页实践
; W6 b( Q$ x4 D# O" N# I 11-10 useLoadMore 支持数据缓存 解决方案分析
11-11 实现分页缓存逻辑
第12章 项目构建和部署
/ c% f" Q$ |6 k& G" d/ | 从生产环境的概念以及生产环境和开发环境的异同的概念开始，接着实践了应用构建，构建代码上线，和构建代码持续集成的一系列概念。
' q, M6 v: S+ w# j" o3 ]2 X 12-1 生产环境和开发环境的异同
1 Q! Z3 c6 d0 Q% C2 n8 ]6 t: j 12-2 为生产环境生成代码
12-3 服务器的概念
12-4 nginx 概念简介
) d& |( W* i6 a! w 12-5 使用 gitee pages 进行部署
$ [; Y% ^* o1 |5 Q9 R9 T* F 12-6 nginx安装和配置访问静态文件
12-7 nginx 配置代理服务
12-8 上传代码到云主机
第13章 课程总结
本章节带领大家回顾课程的内容。
( m- N3 _) @$ T
13-1 课程总结
〖视频截图〗:
