基于Vue3，打造前台+中台通用提效解决方案

基本的Vue知识

课程简介

写了那么多低效的前台项目，如何高效开发，避免无谓加班？本课程通过带你学习42 种前台常见业务模型的构建原理、15 种中台通用组件与一身的通用型项目，为你之后遇到每一个前台功能提供可操作的实现方案与物料库。掌握这些，前端开发事半功倍真的不是梦！

课程目录：

第1章课程导读(了解本课程必看)4节|8分钟
本章中，将会对课程的内容做介绍说明，总览课程中涉及到的知识点和学习方向。（关于课程选型，为什么没有使用TS，在章节介绍的锚点中有说明哦，可以查看下。项目访问也可以关注下锚点~）
1-1课程导读(07:42)
1-2重要-icode获取方法
1-3为什么没有使用TS？
1-4项目访问：https://imooc-front.lgdsunday.club

第2章全新的项目构建方案——vite6节|26分钟
vite作为一面世就备受瞩目的前端构建工具，它究竟有什么神奇的地方？它又凭什么挑战webpack老大的地位呢？学习本章带你了解vite的“前世今生”
2-1前言(01:39)
2-2viteVSwebpack(04:40)
2-3素质三连：vite为什么快？这种快的机制会不会有什么问题？官方是如何解决的？(11:11)
2-4为什么选择了vite(02:25)
2-5通过vite构建《小慕前端》(05:02)
2-6总结(00:54)

第3章定制化、高可用前台样式处理方案——tailwindcss8节|37分钟
你还在用传统的css定义样式吗？你out了。学习tailwind，不写一行css一样实现《高定制化、高个性化、高交互性，高可用性》的精美前台项目。
3-1前言(01:58)
3-2企业级项目下的css处理痛点(05:10)
3-3安装tailwindcss到你的项目(06:12)
3-4tailwindcss初体验(10:06)
3-5项目任务
3-6tailwindcss设计理念和价值体现(12:47)
3-7话题讨论
3-8总结(00:35)

第4章明星项目架构解决方案——搭建基础项目结构7节|22分钟
一般被人追捧，并具备长期可维护、可扩展的能力的项目，被称为明星项目，那么你知道如何搭建一个明星项目的基础架构吗？这一章就来教给你！
4-1前言(01:10)
4-2项目开发助手Prettier-Codeformatter、TailwindCSSIntelliSense、Volar(06:44)
4-3项目架构基本结构处理分析(04:10)
4-4构建项目架构(08:42)
4-5话题讨论：如何理解前台前端架构方案？
4-6项目任务：项目架构方案
4-7总结(00:33)

第5章企业级vite配置方案——让vite得心应手11节|54分钟
任何一种构建工具都需要根据我们的需求进行对应的配置，那么针对于vite而言，在大厂中我们应该如何根据自己的业务进行对应的配置呢？如果你不清楚，那么快快来看本章的内容，企业级vite配置方案
5-1前言(01:11)
5-2明确移动端和PC端的构建顺序(01:50)
5-3构建移动处理工具MobileTerminal(1)(06:46)
5-4通过vueuse优化处理方案(04:57)
5-5定义@软链接(03:58)
5-6构建VueRouter移动端路由表(07:02)
5-7划分移动端首页模块(06:08)
5-8导入并配置axios(06:26)
5-9vite处理代理服务器(04:44)
5-10vite处理环境变量(10:04)
5-11总结(00:47)

第6章构建自己的物料解决方案——构建物料库，实现前端设计16节|128分钟
为什么前台项目没有专门的UI组件库？这种情况下，大牛都是如何解决的？高效的开发者都有属于自己的”物料库“，用来提升工作效率。从本章开始我们一起在企业级的前台项目中，构建出属于我们自己的物料资源库吧！...
6-1前言(01:09)
6-2为什么不使用组件库，而要自己构建？前台系统与后台系统的根本性区别！(06:33)
6-3数据拦截简化数据获取流程(05:05)
6-4业务组件：移动端navigationBar(10:14)
6-5动态rem基准+修正tailwind，完善移动端navigationBar(11:07)
6-6中台组件库，物料库概念与通用组件(06:09)
6-7通用组件：基于vite的统一svg处理svg-icon(14:08)
6-8vite处理svg矢量图(06:45)
6-9移动端slider处理(20:12)
6-10补全category数据(03:52)
6-11通用组件：弹出窗口-popup能力分析(03:28)
6-12通用组件：弹出窗口-popup实现(17:25)
6-13组件间双向数据绑定功能优化(04:24)
6-14vite通用组件自动化注册(08:45)
6-15业务组件：移动端弹层menu(06:45)
6-16总结(01:13)

第7章企业级通用业务Header处理方案——结合中台组件的业务组件处理17节|147分钟
Header模块是PC端业务中的高频功能，通用性极强。那么对于这样的功能大厂通常如何去进行处理呢？当它与中台组件库结合时，又会碰撞出什么样的火花呢？
7-1前言(01:03)
7-2处理PC端基础架构(07:47)
7-3PC端Header模块处理分析与简单实现(06:39)
7-4通用组件：search搜索框能力分析(02:58)
7-5通用组件：search搜索框样式处理(17:35)
7-6通用组件：button按钮能力分析(03:37)
7-7通用组件：button按钮功能实现-1(18:30)
7-8通用组件：button按钮功能实现-2(07:30)
7-9通用组件：完善search基本能力(19:05)
7-10通用组件：popover气泡卡片能力分析(02:57)
7-11话题讨论：popover气泡
7-12通用组件：popover气泡卡片基础功能实现(18:18)
7-13通用组件：popover功能延伸，控制气泡展示位置-1(12:17)
7-14通用组件：popover功能延伸，控制气泡展示位置-2(13:15)
7-15通用组件：处理慢速移动时，气泡消失问题(05:51)
7-16基于popover处理用户模块(07:36)
7-17总结(01:06)

第8章企业级复杂前中台项目响应式处理方案——一套代码多端共用9节|52分钟
一种样式可以同时适配移动端和PC端，这样的功能我们通常称之为响应式。但是咱们的项目是一个复杂的前中台系统，在这样的系统中，我们又应该如何应对这种响应式的问题处理呢？在《样式复用、逻辑复用、可维护性》之间，我们又应该如何进行权衡呢？...
8-1前言(01:52)
8-2响应式下navigationBar实现方案分析(06:36)
8-3抽离公用逻辑，封装系列动作(13:18)
8-4PC端navigationBar私有视图处理(10:03)
8-5PC端navigationBar私有逻辑处理.mp4(05:31)
8-6分析navigationBar闪烁问题(04:17)
8-7处理navigationBar闪烁问题(02:47)
8-8category数据缓存，覆盖初始数据(06:42)
8-9总结(00:36)

第9章主题替换解决方案——打造完善多主题系统8节|51分钟
市面上很多的组件库都存在主题替换的功能，但是如果脱离了组件库你还知道如何实现主题替换吗？整个主题替换方案背后的原理是什么？如果我们想要跟随系统主题发生变化，那么又应该怎么做呢？
9-1前言(02:16)
9-2主题替换原理分析(08:40)
9-3tailwindDarkMode原理(04:16)
9-4为组件增加dark适配(11:11)
9-5DarkMode在复杂应用中的实现逻辑分析(02:31)
9-6DarkMode在复杂应用中的实现(12:35)
9-7跟随系统的主题变更(08:21)
9-8总结(00:55)

第10章瀑布流+长列表+懒加载处理方案——打造企业级高性能通用模块20节|188分钟
为什么大厂的应用使用起来总是那么的丝滑？他们到底给应用施加了什么样的“魔法”？我能开发出媲美大厂团队的精美前台应用吗？应该怎么做？本章把这些“咒语”统统告诉你！
10-1前言(01:26)
10-2业务组件：构建基础列表展示(24:40)
10-3通用组件：瀑布流组件构建分析(08:10)
10-4通用组件-瀑布流：构建瀑布流布局，获取容器宽度与列宽-1(14:20)
10-5通用组件-瀑布流：构建瀑布流布局，获取容器宽度与列宽-2(14:51)
10-6布流：区分图片预加载，获取元素关键属性(19:02)
10-7通用组件-瀑布流：触发计算，定位item位置(21:32)
10-8通用组件-瀑布流：解决瀑布流展示不全的问题(03:27)
10-9通用组件-瀑布流：适配移动端，动态列(12:07)
10-10通用组件-瀑布流：无需图片预加载时，优化功能处理(07:07)
10-11通用组件-瀑布流：总结(04:15)
10-12通用组件：长列表infinite构建分析(04:39)
10-13通用组件：构建长列表infinite组件(08:57)
10-14通用组件：应用infinite结合waterfall实现长列表瀑布流效果(07:15)
10-15通用组件：解决首次数据无法铺满全屏时，数据无法继续加载的bug(13:12)
10-16图片懒加载构建原因+实现原理(03:31)
10-17通用指令：实现图片懒加载(08:41)
10-18深入vite：指令的自动注册(06:04)
10-19指定彩色占位图(02:49)
10-20总结(01:41)

第11章多组件联动与高阶组件方案——list联动search和navigationBar15节|137分钟
多组件联动是日常工作中的常见业务。高阶通用组件是构建中台组件库的难点。那么当这两块内容被集中到一起时，会碰撞出什么样的火花呢？我们拭目以待！
11-1前言(01:23)
11-2多组件联动注意事项与整体逻辑分析(05:50)
11-3简单联动处理：navigationBar对应list(14:28)
11-4明确searchBar对应list处理流程(02:06)
11-5searchBar：搜索提示初步实现(14:02)
11-6searchBar：处理防抖功能(05:46)
11-7searchBar：提示关键字高亮处理(07:09)
11-8searchBar：搜索历史处理(17:07)
11-9通用组件：confirm应用场景(02:02)
11-10通用组件：vnode+h函数+render函数明确confirm构建思路(09:30)
11-11通用组件：构建confirm组件(20:07)
11-12通用组件：函数调用confirm组件(17:02)
11-13searchBar：热门精选模块构建(14:35)
11-14searchBar联动list-(04:28)
11-15总结(01:20)

第12章前台常见功能解决方案：下载+全屏+引导11节|73分钟
在前台项目中，我们会存在很多的常见功能，这些功能通常情况下是偏通用的，比如：文件下载、全屏处理、功能引导等等…那么这些功能如何进行实现呢？本章告诉你！
12-1前言(01:29)
12-2文件下载解决方案(05:38)
12-3通用组件：方法触发的message构建分析(01:45)
12-4通用组件：构建message组件基本能力(16:31)
12-5通用组件：方法触发message展示(08:04)
12-6模块全屏解决方案(05:09)
12-7构建floating基础布局(07:32)
12-8样式修正：处理难看的scrollBar(07:10)
12-9功能引导解决方案(12:13)
12-10解决功能引导图标不显示的问题(05:31)
12-11总结(00:59)

第13章高阶路由过渡处理方案——浏览器堆栈主动介入12节|78分钟
路由过渡动效并没有什么稀奇的，但是如果想要构建一个高交互性的前台系统，仅依靠路由过渡动效就可以实现吗？
13-1前言(02:06)
13-2VueRouter过渡动效可行性分析(03:46)
13-3主动介入浏览器堆栈管理，分析可行性方案(03:51)
13-4主动介入浏览器堆栈管理(05:09)
13-5基于GSAP实现高阶路由过渡动画分析(03:47)
13-6基于GSAP实现高阶路由过渡动画处理-1(15:43)
13-7基于GSAP实现高阶路由过渡动画处理-2(10:59)
13-8通用组件：navbar构建方案分析(02:23)
13-9通用组件：构建navbar(08:16)
13-10基于navbar处理响应式的`pins`页面(16:18)
13-11处理刷新空白问题(04:38)
13-12总结(00:48)

第14章人类行为验证处理方案——脱离UI组件库实现登录、注册+表单校验14节|125分钟
难道你的登录注册只能依靠UI组件库实现吗？你的登录安全吗？如果有机器进行登录验证怎么办？进入本章带你脱离组件库，实现包含人类行为认证的登录、注册、表单校验功能。
14-1前言(01:27)
14-2构建登录模块基础UI结构(20:25)
14-3表单校验实现原理与方案分析(05:49)
14-4项目任务：表单校验模块
14-5基于vee-validata实现普适的表单校验(12:11)
14-6什么是人类行为验证？它的目的、实现原理、构建方案分别是什么？(08:04)
14-7构建人类行为验证模块(21:02)
14-8用户登录行为处理(13:13)
14-9用户信息获取行为(13:22)
14-10退出登录操作(04:59)
14-11token超时处理(03:21)
14-12注册页面基本样式处理(13:42)
14-13处理注册行为(06:18)
14-14总结(01:02)

第15章图片裁剪与上传处理方案——基于阿里云OSS处理用户资料17节|149分钟
图片裁剪方案与对象云存储一直是很多前端开发者的痛点，其实对于大厂而言早已经拥有了最佳实践，学习本章节，打通你的任督二脉，掌握从理论到实现的最佳实践思考路线！
15-1前言(01:50)
15-2通用组件：input构建方案分析(02:49)
15-3通用组件：input构建方案(16:03)
15-4构建用户资料基础样式-1(17:05)
15-5构建用户资料基础样式-2(11:22)
15-6用户基本资料修改方案(12:40)
15-7处理不保存时的同步问题(04:17)
15-8头像修改方案流程分析(02:17)
15-9通用组件：Dialog构建方案分析(01:39)
15-10通用组件：Dialog构建方案(13:08)
15-11应用Dialog展示头像(15:46)
15-12头像裁剪构建方案(10:25)
15-13阿里云OSS与腾讯云COS对象存储方案分析(08:05)
15-14使用临时凭证，上传裁剪图片到阿里云OSS(20:30)
15-15完成头像更新操作(03:30)
15-16登录鉴权解决方案(05:11)
15-17总结(01:25)

第16章移动端路由切换解决方案——虚拟任务栈让你的H5像APP一样丝滑10节|80分钟
移动端与PC端的系统展示难道只是样式有些差异吗？肯定不是的！它们两者具备根本性不同！那么我们如何应对这种不同呢？虚拟任务栈又是什么？快快进入本章学习吧！
16-1前言(01:19)
16-2通用组件：trigger-menu和trigger-menu-item构建方案分析(03:03)
16-3通用组件：构建trigger-menu和trigger-menu-item-(11:02)
16-4前台业务下H5的应用场景(07:36)
16-5通用组件：transition-router-view构建方案分析与虚拟任务栈(09:36)
16-6通用组件：transition-router-view构建方案之过渡动效(20:06)
16-7通用组件：处理过渡动效展示样式错误的问题(07:26)
16-8通用组件：虚拟任务栈处理(11:24)
16-9通用组件：记录页面滚动位置(06:37)
16-10总结(01:04)

第17章VIP通用业务构建方案——处理VIP服务7节|52分钟
用户付费是企业常见的一种盈利的形式，那么在我们应该如何去构建这个非常重要的业务模型呢？本章来告诉你。
17-1前言(01:45)
17-2构建基础样式(14:17)
17-3通用组件：倒计时构建方案分析(02:06)
17-4通用组件：倒计时构建方案(18:08)
17-5支付模块：PC端支付样式处理(08:14)
17-6支付模块：移动端支付样式处理-(06:34)
17-7总结(00:46)

第18章登录通用解决方案——第三方登录处理11节|126分钟
第三方登录是前台项目中必备的功能，那么这种功能我们应该如何对接实现呢？我们都需要提供哪些资料呢？本章为你解密！
18-1前言(01:39)
18-2第三方平台登录解决方案流程大解析(11:09)
18-3QQ开放平台流程大解析(07:55)
18-4QQ登录对接流程：获取QQ用户信息(22:33)
18-5QQ登录对接流程：跨页面信息传输(14:36)
18-6QQ登录对接流程：认证是否已注册，完成QQ登录流程(16:52)
18-7移动端QQ登录对接：触发吊起操作，完成移动端QQ登录(06:58)
18-8微信开放平台大解析(17:46)
18-9对接微信扫码登录-1(15:23)
18-10对接微信扫码登录-2(08:45)
18-11总结(01:30)

第19章用户反馈解决方案——兔小巢构建反馈功能5节|11分钟
用户反馈功能是提升用户体验的一个非常重要的功能。那么用户反馈具体是实现方案呢？我们又如何快速的构建用户反馈平台呢？本章为你解密！
19-1前言(01:57)
19-2用户反馈整体实现方案分析(01:49)
19-3兔小巢全解析(02:30)
19-4基于兔小巢实现用户反馈(03:39)
19-5总结(00:38)

第20章分享通用解决方案——第三方平台分享功能处理5节|20分钟
分享到第三方是前台项目中的常见功能，那么这种功能我们应该如何对接实现呢？我们都需要提供哪些资料呢？本章为你解密！
20-1前言(01:31)
20-2第三方分享整体方案分析(02:48)
20-3微博开放平台大解析(07:48)
20-4微博分享对接实现(07:09)
20-5总结(00:34)

第21章支付通用解决方案——第三方平台支付处理9节|66分钟
第三方支付结合vip功能是目前前台项目盈利的一个重要方向，那么这种功能我们应该如何对接实现呢？我们都需要提供哪些资料呢？本章为你解密！
21-1前言(00:56)
21-2支付宝平台大解析(11:48)
21-3支付宝支付对接-配置开发设置(11:07)
21-4支付宝支付对接-支付功能技术对接(26:32)
21-5支付宝支付对接-移动端支付(05:09)
21-6支付宝支付对接-技术对接前后端都做了什么(05:36)
21-7微信支付对接说明(02:50)
21-8话题讨论：第三方功能
21-9总结(01:13)

第22章发布处理方案——前台项目构建与发布处理8节|36分钟
把我们的项目发布到服务器。
22-1开篇(02:07)
22-2域名、DNS、公网IP、服务器、Nginx之间的关系(03:34)
22-3阿里云服务器购买指南(05:49)
22-4服务器连接方式(04:00)
22-5Nginx环境处理(18:02)
22-6项目发布(02:10)
22-7话题讨论：服务器
22-8项目任务：部署

第23章课程总结1节|1分钟
本章是课程的最后一节了，到此课程就完结了，武功秘籍已经传授给大家了，后面大家就要自己闯荡江湖了。加油~
23-1课程总结(00:38)