手记

【九月打卡】第10天+学习企业级通用业务Header处理方案

课程名称:基于Vue3,打造前台+中台通用提效解决方案
课程章节:第7章 企业级通用业务Header处理方案——结合中台组件的业务组件处理
主讲老师:Sunday
课程链接https://coding.imooc.com/class/chapter/577.html#Anchor

课程内容:

今天学习的内容包括:

  • 处理pc基本架构
  • PC端heder模块处理分析与简单实现
  • 通用组件:search搜索款能力分析
  • 通用组件button按钮分析
  • 通用组件popover组件分析

课程收获:

为什么自己搭建库

  • 后台系统样式同质化
  • 前台系统讲究个性化

数据拦截简化数据获取流程

  • axios相应拦截器
  • vite构建的项目defineProps不用导入

tailwind渲染navigation样式

  • 设置动态基准值
  • 配置tailwind 的fontSize

中台组件库,物料库以及通用组件

  • 中台组件库
    • 类似element
    • 自研
      • svg-icon
        • 自定义tailwind参数
        • 自定义tailwind的特效
  • 中台物料库
    • 物料市场
    • 组件市场

vite 处理svg矢量图

  • vite-plugin-svg-icons@2.0.1
    • 在vite.config 中配置
      • 配置svg路径
      • 配置symbolI
    • 注册svg-icons(虚拟注册)

移动端slider处理

  • vue3中拿v-for下的ref
    • 使用ref绑定函数,方案,可以拿全部,最后再通过生命周期给清空。

处理axios数据方案

  • 复杂的数据可以当都拆分一个js处理完return 出来

通用组件popup

  • 功能
    • 当popup展开时,内容视图不属于任何一个组件内部,而应该直接插到body下
    • popup应该包含两个部分内容,一部分为背景蒙版,一部分为内容的包裹容器
    • popup应该通过一个双向绑定进行控制展示和隐藏
    • popup展示时,滚动应该被锁定
    • 内容区域应该接收所有的attrs,并且通过插槽让调用方指定其内容
  • 实现
    • vue3 新特性teleport 插入导任一节点
      • vue3过渡动画
      • 蒙版
        • vue3中的双向绑定,
        • vueUse锁定滚动的方法
      • 内容

组件双向绑定优化

  • vueuse中的useVModel

vite通用组件自动化注册

  • glob导入 文件系统导入多个模块
  • vue的defineAsyncComponent 方法,改方法可以创建一个按需加载的异步组件
  • 实现
    • 获取当前路径下所有文件夹中index.vue
    • 遍历获取的组件模块
    • 利用app.component进行注册

移动弹层实现

  • 写业务组件

课程学习截图

0人推荐
随时随地看视频
慕课网APP