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

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

2024-09-08 02:09:13 前端知识 前端哥 181 48 我要收藏

一、页面头部实现

  • 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 机制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17865.html
标签
评论
发布的文章

数据持久化(Json)

2024-09-28 23:09:01

JSON Gate 开源项目教程

2024-09-28 23:09:00

【C 】Ubuntu安装jsoncpp

2024-09-28 23:09:58

http请求json

2024-09-28 23:09:58

JSON 格式详解

2024-09-28 23:09:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!