- 博客(19)
- 收藏
- 关注
RSS订阅原创 GSAP动画库的基本使用
GSAP 是一个强大的 JavaScript 工具集，可以将开发人员变成动画超级英雄。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……GSAP 的 ScrollTrigger 插件可让您使用最少的代码创建令人惊叹的基于滚动的动画。gsap.to()这个api里面有三个参数可以写，gsap.to("你的目标target", { 你所要做出的动作}, "提前时间或滞后时间")。gsap.to()其实就是将你所要操作的元素到你所指定的位置。
2023-10-18 10:53:08
469
1
原创 github使用gh-pages部署静态站点
当我们想把自己的网站部署到一个静态网站上，Github Pages是一个很好的选择（稳定、可靠、不花钱）。下面是一个基于vue3+vite的项目的部署流程部署流程。假设你已经有一个项目并且已经发布到github上了，先把项目git clone到本地。1、安装gh-pages2、初始化仓库，提交代码到远程仓库3、在文件中添加script脚本4、在终端运行命令会出现一个dist文件夹。
2023-10-12 11:26:30
525
原创 响应式布局和自适应布局
响应式布局：指当视口的宽度发生变化的时候，页面元素的排列位置也会发生相应的变化。也就是当屏幕的宽度发生变化的时候，设置不同的CSS样式。响应式布局需要在不同的情况下写不同的布局。自适应布局：指的是当屏幕的大小发生变化的时候，元素的比例，百分比大小发生变化，可以自动的适应不同的屏幕。自适应布局只需要写一套代码。1. 媒体查询（最常见）3. vw vh布局。
2023-10-10 15:30:09
82
1
原创 Axios封装：限制重复请求
2. 再次请求该接口时，先判断map中是否存在同名key，如果存在，那么调用Abortcontroller的abort方法执行取消，反之则在map当中新增key。axios提供了两个取消请求的API，分别是CancelToken和AbortController。1. 当需要发起一个请求之前，可以先取消掉之前的请求，这样确保每次都获取到最新的响应数据，避免数据错乱。，请求这个接口的时候，拼接接口的url和参数等信息保存到一个map当中。1. 如果在当前接口设置了不允许重复请求，那么在请求拦截器中设置。
2023-09-19 21:01:17
793
原创 手写数组扁平化/手写flat
首先写一个myflat函数，使用forEach遍历数组的每一项，使用isArray去判断每一项是否都是数组，不是的话就push到新的数组里面，是的话就递归调用myflat函数，在使用concat连接数组赋值到新的数组里面去。实现：定义一个空数组result，再去遍历数组里的每一项，判断是否为数组，是的话就将数据都放到result里面，结合concat，考虑到可能是循环嵌套的数组，所以要递归调用函数。否则就使用reduce方法，里面判断是否是一个数组，是的话使用。方法三：使用forEach和递归的方法。
2023-09-08 10:39:22
160
1
原创 解决vue3使用element-plus按需加载ElMessage没有样式问题
在tsconfig.json中的include字段中添加auto-imports.d.ts。按照element-plus方法import ElMessage进来，样式不会生效。如果项目中有使用TypeScript，那么会提示ElMessage不存在问题。将import引入去除，直接使用ElMessage。就可以了,这样就会自动引入了。
2023-09-03 10:34:40
757
原创 vue3全局注册组件方式
第二步：在main.ts文件中引入components下的index.ts文件并使用。第一步：先在components文件夹下建立一个index.ts文件。通过全局注册组件可以不用通过import引入才能使用，减少代码量。第三步：将需要注册为全局组件的组件，遍历注册即可。
2023-09-02 16:37:09
99
原创 git clone出现报错：【Error】fatal: unable to access ‘https://github.com/xxx/’: Ope
git clone项目的时候报错：：clone成功。
2023-08-27 13:34:59
158
1
原创 JavaScript数组进阶
for of，在使用for of遍历数组时，如果数组里面是值类型，那么for of操作不会改变原数组。如果是引用类型，那么会改变原数组。const关键字定义一个常量后期是不能再进行修改的，而针对引用类型是没有关系的。map使用在引用类型上，此时原数组会改变，但这与map方法无关，这属于是访问到了对象内部并赋值.引用类型赋值中，两个使用的是同一个内存地址，array的值回收newArr的影响。map使用在值类型上，会返回一个新数组，不会改变原数组。值类型赋值中，是新创建了一个引用，a的值并不会受b影响。
2023-08-20 16:21:09
37
1
原创 javascript中的reduce方法
reduce()接受一个函数和一个初始值。用于将数组中的每一个元素依次执行该函数，最终将其归并为一个值。在没有第二个参数的情况下，pre第一次执行会是数组的第一个值，第二次会是数组的返回值当有了第二个参数之后，pre的值就是第二个参数的值。
2023-08-20 16:17:49
52
1
原创 项目代码规范
Prettier是一款强大的代码格式化工具，支持JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown等语言，基本上前端能用到的文件格式他都可以搞定，是当下最流行的代码格式化工具。添加prettier插件：在.eslintrc.cjs当中加上这一句，就会让eslint在检测的时候去读取.prettieerrc.json文件的规则，让代码符合prettier规范。二、解决eslint和prettier冲突的问题。
2023-08-19 17:01:16
38
原创 vue解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignor
关闭语法检查，找到vue.config.js文件加上。ESLint 对语法的要求导致编译的时候报错。
2023-08-19 10:34:15
371
原创 前端文件上传
需要将图片转成blob对象才能传输给后端，再将blob转换成url放到fileList放进去。前端文件上传有两种方式，第一种通过二进制blob传输（formData传输），第二种是通过base64传输。fileReader用于把文件（file对象或者blob对象）读成某种形式，如base64，text文本。blob对象的第一个参数必须是一个数组，你可以把一个file对象放进去就可以给你转成blob对象。formData可以使一个files以一个二进制的形式传递给后端。file对象其实是blob的子类。
2023-08-13 10:45:36
2422
1
原创 前端文件导出
当我们拿到后端的导出数据接口，直接调用不经过处理会传回一个二进制对象。需要使用npm下载一个插件file-saver，里面有个saveAs方法可以将二进制文件转成想要的类型${${
2023-08-13 10:13:07
68
原创 TypeError: Cannot read property ‘songs‘ of undefined
TypeError: Cannot read property 'xxxx' of undefined
2023-04-12 14:06:30
113
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人