【九月打卡】第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进行注册

移动弹层实现

• 写业务组件

课程学习截图