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

本站官方QQ群:116064591

PS 本站不保证资源的完整性,不对其真实性负责。请自行确认是否符合个人需求。如有介意,请勿获取。

  • 第1章课程导读(了解本课程必看) 【4 节 | 8分钟】
    • 视频:1-2 重要-icode获取方法
    • 图文:1-3 为什么没有使用 TS?
    • 图文:1-4 项目访问:https://imooc-front.lgdsunday.club/
  • 第2章全新的项目构建方案——vite 【6 节 | 26分钟】
    • 视频:2-1 前言 (01:39)
    • 视频:2-2 vite VS webpack (04:40)
    • 视频:2-3 素质三连:vite 为什么快?这种快的机制会不会有什么问题?官方是如何解决的? (11:11)
    • 视频:2-4 为什么选择了 vite (02:25)
    • 视频:2-5 通过 vite 构建《小慕前端》 (05:02)
    • 视频:2-6 总结 (00:54)
  • 第3章定制化、高可用前台样式处理方案——tailwindcss 【8 节 | 37分钟】
    • 视频:3-1 前言 (01:58)
    • 视频:3-2 企业级项目下的 css 处理痛点 (05:10)
    • 视频:3-3 安装 tailwindcss 到你的项目 (06:12)
    • 视频:3-4 tailwindcss 初体验 (10:06)
    • 作业:3-5 项目任务
    • 视频:3-6 tailwindcss 设计理念和价值体现 (12:47)
    • 作业:3-7 话题讨论
    • 视频:3-8 总结 (00:35)
  • 第4章明星项目架构解决方案——搭建基础项目结构 【7 节 | 22分钟】
    • 视频:4-1 前言 (01:10)
    • 视频:4-2 项目开发助手 Prettier – Code formatter 、 Tailwind CSS IntelliSense、Volar (06:44)
    • 视频:4-3 项目架构基本结构处理分析 (04:10)
    • 视频:4-4 构建项目架构 (08:42)
    • 作业:4-5 话题讨论:如何理解前台前端架构方案?
    • 作业:4-6 项目任务:项目架构方案
    • 视频:4-7 总结 (00:33)
  • 第5章企业级vite配置方案——让vite得心应手 【11 节 | 54分钟】
    • 视频: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-9 vite 处理代理服务器 (04:44)
    • 视频:5-10 vite 处理环境变量 (10:04)
    • 视频:5-11 总结 (00:47)
  • 第6章构建自己的物料解决方案——构建物料库,实现前端设计 【16 节 | 128分钟】
    • 视频: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-8 vite 处理 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-14 vite 通用组件自动化注册 (08:45)
    • 视频:6-15 业务组件:移动端弹层 menu (06:45)
    • 视频:6-16 总结 (01:13)
  • 第7章企业级通用业务Header处理方案——结合中台组件的业务组件处理 【17 节 | 147分钟】
    • 视频:7-1 前 言 (01:03)
    • 视频:7-2 处理 PC 端基础架构 (07:47)
    • 视频:7-3 PC 端 Header 模块处理分析与简单实现 (06:39)
    • 视频:7-4 通用组件:search 搜索框能力分析 (02:58)
    • 视频:7-5 通用组件:search 搜索框样式处理(13-34 小孩 (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分钟】
    • 视频:8-1 前言 (01:52)
    • 视频:8-2 响应式下 navigationBar 实现方案分析 (06:36)
    • 视频:8-3 抽离公用逻辑,封装系列动作 (13:18)
    • 视频:8-4 PC 端 navigationBar 私有视图处理 (10:03)
    • 视频:8-5 PC 端 navigationBar 私有逻辑处理.mp4 (05:31)
    • 视频:8-6 分析 navigationBar 闪烁问题 (04:17)
    • 视频:8-7 处理 navigationBar 闪烁问题 (02:47)
    • 视频:8-8 category 数据缓存,覆盖初始数据 (06:42)
    • 视频:8-9 总结 (00:36)
  • 第9章主题替换解决方案——打造完善多主题系统 【8 节 | 51分钟】
    • 视频:9-1 前言 (02:16)
    • 视频:9-2 主题替换原理分析 (08:40)
    • 视频:9-3 tailwind DarkMode 原理 (04:16)
    • 视频:9-4 为组件增加 dark 适配 (11:11)
    • 视频:9-5 DarkMode 在复杂应用中的实现逻辑分析 (02:31)
    • 视频:9-6 DarkMode 在复杂应用中的实现 (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和navigationBar 【15 节 | 137分钟】
    • 视频:11-1 前言 (01:23)
    • 视频:11-2 多组件联动注意事项与整体逻辑分析 (05:50)
    • 视频:11-3 简单联动处理:navigationBar 对应 list (14:28)
    • 视频:11-4 明确 searchBar 对应 list 处理流程 (02:06)
    • 视频:11-5 searchBar :搜索提示初步实现 (14:02)
    • 视频:11-6 searchBar :处理防抖功能 (05:46)
    • 视频:11-7 searchBar :提示关键字高亮处理 (07:09)
    • 视频:11-8 searchBar:搜索历史处理 (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-13 searchBar:热门精选模块构建 (14:35)
    • 视频:11-14 searchBar 联动 list- (04:28)
    • 视频:11-15 总结 (01:20)
  • 第12章前台常见功能解决方案:下载+全屏+引导
  • 第13章高阶路由过渡处理方案——浏览器堆栈主动介入
  • 第14章人类行为验证处理方案——脱离UI组件库实现登录、注册+表单校验
  • 第15章图片裁剪与上传处理方案——基于阿里云OSS处理用户资料
  • 第16章移动端路由切换解决方案——虚拟任务栈让你的H5像APP一样丝滑
  • 第17章VIP通用业务构建方案——处理VIP服务
  • 第18章登录通用解决方案——第三方登录处理
  • 第19章用户反馈解决方案——兔小巢构建反馈功能
  • 第20章分享通用解决方案——第三方平台分享功能处理
  • 第21章支付通用解决方案——第三方平台支付处理
  • 第22章发布处理方案——前台项目构建与发布处理
  • 第23章课程总结
© 版权声明
点个赞吧~
点赞93
基于 Vue3 ,打造前台+中台通用提效解决方案 | 疯奇社
基于 Vue3 ,打造前台+中台通用提效解决方案
此内容为付费资源,请付费后查看
50积分
付费资源
已售 48
坐论 共2条

请登录后发表评论