课程简介
本课程是系统介绍前端页面开发的课程,包括下面几个模块内容,TS语法的核心,Vue3核心模块,包括路由、pinia,框架源码分析,并手动编写一个基于Vue3 核心的框架,并介绍了微服务的应用和实践。
本课程从最基础的框架核心讲起,详细介绍 Vue3的方方面面,包含组件应用、路由和核心思想,并结合案例,讲述微服务开发项目的流程和注意事项,最后,手动开发一个属于自己的Vue3 框架。
目标收益
1.学习Vue3进阶内容,包括路由和组件高级应用。
2.学会如何在项目中应用Vue3编程思想开发。
3.掌握在项目中使用vite工具开发项目的过程。
4.掌握微前端搭建和项目应用的方法。
培训对象
本课程知识面向以下学习对象:
1.正在从事传统PC端Web页面的技术开发人员。
2.希望从事移动端WebApp应用开发的技术人员。
3.对前端技术感兴趣,希望从事这方面工作的人员。
4.掌握一些传统的前端开发技术,想进一步学习Web开发的人员。
5.想进一步掌握和提升Vue3核心技术应用人员。
课程大纲
1.前端框架现状 |
1.1面临现状和问题 1.2前端发展方向 1.3框架选择 1.4MVVM模式介绍 |
2.ES 6中面向对象编程 |
2.1类的定义和组成 2.2类的封装和继承 2.3模块化编程 2.4完整案例实战 |
3.认识TypeScript |
3.1什么是 TS 3.2为什么要使用TS 3.3语言特点 3.4成功案例 3.5环境构建 3.6编译过程分析 |
4.响应式编程 |
4.1基础概念 4.2概念示意图 4.3创建器 4.4合并操作符 |
5.Vue3组件高级应用 |
5.1父子间传值 5.2slot传参 5.3并列组件传值 5.4全局变量 5.5案例——数据请求应用 |
6.Vue3动态和异步组件 |
6.1动态组件实现 6.2动态组件传参 6.3keep-alive使用 6.4异步组件实现 6.5异步组件和Suspense |
7.Provide/Inject依赖注入 |
7.1提供数据 7.2注入数据 7.3提供和注入响应式数据 7.4defineProps和defineEmits 7.5defineExpose 7.6useSlots和useAttrs |
8.路由配置和应用 |
8.1Router基础配置 8.2路由传参与接收 8.3嵌套路由配置 8.4路由拦截 8.5重定向和404配置 |
9.Pinia数据管理 |
9.1为什么使用Pinia 9.2如何使用Pinia 9.3Pinia核心内容 9.4Pinia与Vuex区别 9.5缓存状态数据 |
10.Vue3中key和diff算法 |
10.1认识VNode和VDOM 10.2key的作用和diff算法 10.3没有key时的diff算法操作 10.4有key时的diff算法操作 |
11.Vue3源码核心模块 |
11.1源码概述 11.2认识虚拟DOM 11.3编译和渲染系统 11.4响应式系统 |
12.手写微型Vue3核心系统 |
12.1渲染流程和VNode 12.2h和 mount 函数 12.3patch函数实现 12.4响应式系统实现 12.5应用程序入口模块 |
13.什么是前后端分离 |
13.1诞生背景 13.2面临问题 13.3解决方案 |
14.如何做前后端分离 |
14.1单页应用面临问题 14.2优化SPA方案 14.3中间件功能与优势 14.4应用——分段输出页面 14.5应用——嵌套异步请求 |
15.微前端出现背景 |
15.1 什么是微前端 15.2 为什么去使用它 15.3 怎样使用微前端 15.4 应用间如何通信 15.5 如何处理公共依赖 |
16.微前端在美团外卖实践 |
16.1需求背景 16.2实践方案 16.3以路由为基座式微前端 16.4动态方案 16.5配置方案 |
17.字节跳动是落地微前端 |
17.1基于 SPA 的微前端架构 17.2应用生命周期 17.3加载器的设计 17.4沙箱的设计 17.5路由系统的设计 |
18.Vite打包 |
18.1为什么选择vite 18.2安装与配置 18.3构建一个指定模板项目 18.4使用插件和静态资源处理 18.5案例——打包一个Vue3项目 |
1.前端框架现状 1.1面临现状和问题 1.2前端发展方向 1.3框架选择 1.4MVVM模式介绍 |
2.ES 6中面向对象编程 2.1类的定义和组成 2.2类的封装和继承 2.3模块化编程 2.4完整案例实战 |
3.认识TypeScript 3.1什么是 TS 3.2为什么要使用TS 3.3语言特点 3.4成功案例 3.5环境构建 3.6编译过程分析 |
4.响应式编程 4.1基础概念 4.2概念示意图 4.3创建器 4.4合并操作符 |
5.Vue3组件高级应用 5.1父子间传值 5.2slot传参 5.3并列组件传值 5.4全局变量 5.5案例——数据请求应用 |
6.Vue3动态和异步组件 6.1动态组件实现 6.2动态组件传参 6.3keep-alive使用 6.4异步组件实现 6.5异步组件和Suspense |
7.Provide/Inject依赖注入 7.1提供数据 7.2注入数据 7.3提供和注入响应式数据 7.4defineProps和defineEmits 7.5defineExpose 7.6useSlots和useAttrs |
8.路由配置和应用 8.1Router基础配置 8.2路由传参与接收 8.3嵌套路由配置 8.4路由拦截 8.5重定向和404配置 |
9.Pinia数据管理 9.1为什么使用Pinia 9.2如何使用Pinia 9.3Pinia核心内容 9.4Pinia与Vuex区别 9.5缓存状态数据 |
10.Vue3中key和diff算法 10.1认识VNode和VDOM 10.2key的作用和diff算法 10.3没有key时的diff算法操作 10.4有key时的diff算法操作 |
11.Vue3源码核心模块 11.1源码概述 11.2认识虚拟DOM 11.3编译和渲染系统 11.4响应式系统 |
12.手写微型Vue3核心系统 12.1渲染流程和VNode 12.2h和 mount 函数 12.3patch函数实现 12.4响应式系统实现 12.5应用程序入口模块 |
13.什么是前后端分离 13.1诞生背景 13.2面临问题 13.3解决方案 |
14.如何做前后端分离 14.1单页应用面临问题 14.2优化SPA方案 14.3中间件功能与优势 14.4应用——分段输出页面 14.5应用——嵌套异步请求 |
15.微前端出现背景 15.1 什么是微前端 15.2 为什么去使用它 15.3 怎样使用微前端 15.4 应用间如何通信 15.5 如何处理公共依赖 |
16.微前端在美团外卖实践 16.1需求背景 16.2实践方案 16.3以路由为基座式微前端 16.4动态方案 16.5配置方案 |
17.字节跳动是落地微前端 17.1基于 SPA 的微前端架构 17.2应用生命周期 17.3加载器的设计 17.4沙箱的设计 17.5路由系统的设计 |
18.Vite打包 18.1为什么选择vite 18.2安装与配置 18.3构建一个指定模板项目 18.4使用插件和静态资源处理 18.5案例——打包一个Vue3项目 |