手记

【学习打卡】第二天 中前台平台搭建,提高工作效率

第一模块


学习课程名称: 基于 Vue3 ,打造前台+中台通用提效解决方案
章节名称:前台常见功能解决方案:下载+全屏+引导
讲师姓名:Sunday


第二模块


课程内容概述:主要讲解了4个核心功能

  1. 文件下载
  2. 通用组件:message构建
  3. 全屏组件
  4. 引导处理

第三模块


老师具体讲解了几个常见的功能,在工作中用的也比较多;
在文件下载核心功能中,提供两个大厂常用的下载功能包:小文件下载(file-saver)、大文件下载(streamsaver),由于本项目都是小文件,所以直接使用file-saver, 学习之后,了解用法很简单,很容易上手。
在通用组件构建中,也是尝试从element一些常用UI框架中寻找灵感,构建之前,想好思路,这一点也是值得我在工作中学习的,一个组件或者页面开发其实都很简单,大家都能写出来,并且实现的方式又很多种。如果想用优质的代码写出普适性的组件,并且让大家都很容易看懂,这就很要考验编程的艺术了
通用组件构建中,我们会先构建出一个对应的组件,然后通过h函数构建vnode(虚拟DOM),再由render函数进行渲染。
构建通用组件,我们会提前想好组件具备哪些能力,并且也要兼顾到组件的易用性,要让使用者觉得组件好用,才是硬道理。当然针对一些异常信息,也要能及时暴露出来,让使用者帮我们一起维护好通用组件。
通过方法触发组件步骤:

  1. 用h函数传入组件、props,拿到对应的vnode
  2. 接着用render函数,将vnode渲染到body上
  3. 最后,记得通过render销毁对应的组件

模块全屏解决方案
工作中,通常使用全屏的API(Element.requestFullscreen())

document.getElementById('app').requestFullscreen()

由于这个API比较原始,老师提供更加简便的API:useFullScreen

/**
 * 生成全屏方法
 */
const imgTarget = ref(null)
const { enter: onImgFullScreen } = useFullscreen(imgTarget)

对于全屏解决方案,老师提供另一视角,很简便的实现了全屏,自己也得到了启发:一个简单的功能,有时候并不是实现了就好了,而是要不断尝试最优解

功能引导解决方案

借助了一个第三方的包:driver.js,快速将功能引导实现了
对于一些优秀的类库,还是要经常放在项目中去检验,只有用过了,才知道真香!!!


第四模块


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