Vue3+Pinia+Vite+TS 还原高性能外卖APP项目 4️⃣首页开发
一、页面头部实现
- normalize.css：处理不同浏览器的默认样式
- sass:：CSS 预处理器
- 如何使用图片
- 封装 TheTop 组件
- 使用 VanSearch 组件
- 使用 defineProps 定义组件的 Props
- 声明 Props 的类型文件
汇总 知识点
- flex:1 什么意思 flex-grow定义项目放大比例 等分剩余空间
- Css var() 函数 var() 函数用于插入自定义的属性值，一个属性值可在多处被使用
- defineProps 在vue2中，用props来接受父组件传递来的数据，vue3用defineProps
- TS - interface 相关特性 & interface和type的区别分析
- defineEmit vue3的组件事件和defineEmits & setup中defineEmits与defineProps的使用案例
- e.target as HTMLInputElement).value vue3(ts)类型"EventTarget"上不存在属性"value"
- as TypeScript 中的"as"语法是什么？
- slot插槽 详解Vue插槽slot的使用与案例展示
BEM 命名规范
- Bem 是块(block)、元素(element)、修饰符(modifier)的简写
- -中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号
- _ _双下划线：双下划线用来连接块和块的子元素
- --双中划线：双中划线用来描述一个块或者块的子元素的一种状态
二、自定义hooks-useToggle实现搜索页展示切换
三、业务组件 --- SearchView组件开发
- 使用 transition 和 transition-group实现动画效果
- Search 组件复用
- computed 计算属性、watch 监听属性
- 使用 axios 实例发送业务请求、mock 请求
- 性能优化：useDebounce避免多次请求(防抖)
汇总 知识点
主要代码
四、自定义hooks-useAsync 实现请求处理
- Promise then 和 catch 的处理
- TS 声明复杂的类型结构
- 使用 jsonserver 中间件延时返回数据
汇总知识点
五、基础组件-LoadingView 组件实现加载骨架
- uselnterval & useTimeout
- ref 获取 DOM
- withDefaults 设置 props 默认值
- style使用 script setup 里的 JS 变量
- v-html 渲染 html 模板
- tansform: scale 实现小于 1px 的边线
- ScrolBar 轮播组件的实现原理
八、业务组件-CountDown 倒计时组件开发
九、基础组件-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 机制