Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 4️⃣首页开发

一、页面头部实现

• normalize.css：处理不同浏览器的默认样式
• sass:：CSS 预处理器
• 如何使用图片
• 封装 TheTop 组件
• 使用 VanSearch 组件
• 使用 defineProps 定义组件的 Props
• 声明 Props 的类型文件

汇总 知识点

1. flex:1 什么意思 flex-grow定义项目放大比例 等分剩余空间
2. Css var() 函数 var() 函数用于插入自定义的属性值，一个属性值可在多处被使用
3. defineProps 在vue2中，用props来接受父组件传递来的数据，vue3用defineProps
4. TS - interface 相关特性 & interface和type的区别分析
5. defineEmit vue3的组件事件和defineEmits & setup中defineEmits与defineProps的使用案例
6. e.target as HTMLInputElement).value vue3(ts)类型“EventTarget”上不存在属性“value”
7. as TypeScript 中的“as”语法是什么？
8. slot插槽 详解Vue插槽slot的使用与案例展示

BEM 命名规范

• Bem 是块(block)、元素(element)、修饰符(modifier)的简写
• -中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号
• _ _双下划线：双下划线用来连接块和块的子元素
• –双中划线：双中划线用来描述一个块或者块的子元素的一种状态

二、自定义hooks-useToggle实现搜索页展示切换

三、业务组件 — SearchView组件开发

• 使用 transition 和 transition-group实现动画效果
• Search 组件复用
• computed 计算属性、watch 监听属性
• 使用 axios 实例发送业务请求、mock 请求
• 性能优化：useDebounce避免多次请求(防抖)

汇总 知识点

• vue 之 Transition 各种动画实现，一文让你会动画
• ConfigProvider 全局配置 vant变量列表
• 防抖问题 【前端】防抖和节流原理+实现
• 泛型 TS中的泛型
• Ref是什么意思 Vue3关于响应式数据类型(ref、reactive、toRef、以及toRefs)
• hooks钩子 前端造轮子神器 Hooks

主要代码

四、自定义hooks-useAsync 实现请求处理

• Promise then 和 catch 的处理
• TS 声明复杂的类型结构
• 使用 jsonserver 中间件延时返回数据

汇总知识点

• import { UnwrapRef } from ‘vue’ Vue3 的 ref 和 reactive 问题
• 对 Ref 类型进行反解 TypeScript在Vue3.0的Ref类型中的实践

五、基础组件-LoadingView 组件实现加载骨架

六、业务组件-Grid 布局实现Transformer 金刚位组件

• grid布局 css-grid布局 —— 网格布局（栅格布局）

七、业务组件-ScrollBar 滚动提示栏组件开发

• uselnterval & useTimeout
• ref 获取 DOM
• withDefaults 设置 props 默认值
• style使用 script setup 里的 JS 变量
• v-html 渲染 html 模板
• tansform: scale 实现小于 1px 的边线
• ScrolBar 轮播组件的实现原理

八、业务组件-CountDown 倒计时组件开发

• padStart 字符串填充-padStart 、padEnd
• 使用 requestAnimationFrame(或setTimeout)计时 优化 代替setTimeout
• 性能优化：毫秒级/非毫秒级更新
• 函数重载 指定义多个具有相同名称的函数，但具有不同的参数类型或参数数量

九、基础组件-Swipe 轮播图组件开发

• useParent 和 useChildren 使用 provide/inject 实现跨组件间通信
• getCurrentInstance 获取组件实例
• useExpose 实现暴露组件方法
• useTouch 实现 touch 事件封装
• useEventListener 实现事件监听
• onMountedOrActivated 封装生命周期
• provide/inject 跨组件通信问题 解决“prop 逐级透传”

十、业务组件-使用 component 实现标签页动态展示内容

• component 动态渲染组件：用于渲染动态组件或元素的“元组件”；渲染的实际组件由 is prop 决定（当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名；is 也可以直接绑定到组件的定义）
• Sticky 粘性布局：通过滚动监听判断 sticky 组件是否滚动到原本位置 后固定到某一位置

十一、基础组件-List 组件实现列表滚动加载

• useRect(getBoundingClientRect)获取 DOM 元素的位置信息
• useScrollParent 获取滚动容器
• OpList 列表滚动加载组件
  

十二、性能优化-使用 IntersectionObserver 实现图片懒加载

• IntersectionObserver 一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法
• Vue3 指令 Direction
• Vue3 插件 Plugin 机制