- 博客(71)
- 收藏
- 关注
原创 vue项目中实现SVG的定制化
SVG是可缩放矢量图形(Scalable Vector Graphics)的缩写,它是一种基于XML的矢量图形格式,可以无损地缩放和变换,不会失真。SVG图像可以在任何分辨率下显示清晰,因此非常适合用于响应式设计和移动设备。另外,SVG图像可以通过CSS和JavaScript进行动态修改和交互,比如动画效果、鼠标悬停等。
2023-06-01 15:03:36
1113
原创 Monorepo开发策略详解
Monorepo 是一种将多个项目存放在同一个代码库中的开发策略。”mono” 表示单一 ,“repo” 是”repository”的缩写,意为多个项目共用一个代码库来管理依赖关系,同一套配置文件,统一构建部署流程等
2023-05-06 10:21:11
1112
1
原创 Pinia入门-实现简单的用户状态管理
Pinia本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享(这点和Vuex、Redux一样)Pinia最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex 5核心团队讨论中的许多想法。最终,团队意识到Pinia已经实现了Vuex5中大部分内容,所以最终决定用Pinia来替代Vuex
2023-05-05 14:53:20
803
原创 CSS Grid 网格布局详解
网格布局(Grid)是CSS中最强大的布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局 有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
2023-03-30 21:24:31
3077
4
原创 跨域常见的解决方案
跨域是指浏览器在向一个服务器发送请求时,该请求的地址与当前页面的地址不同,即协议、域名、端口号中至少有一个不同,导致浏览器出于安全考虑,阻止了页面与请求之间的交互。
2023-03-25 15:59:45
1693
2
原创 前端页面适配之postcss-px-to-viewport
postcss-px-to-viewport是一个 PostCSS 插件,用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局,以提高页面的响应性和可用性。
2023-03-24 19:23:48
17014
6
原创 Echarts实现图表自适应屏幕分辨率
之前做项目的时候要实现echarts图表随浏览器窗口大小变化而改变,echarts本身提供了一个resize()方法,然后我们需要用一个函数实现浏览器窗口监听,最初我选用的是方法,当页面只有一个图表时可以实现,但当页面多个图表时window.onresize会被覆盖从而导致失效,最后我选用了方法解决了这个问题。
2023-03-21 16:17:32
2150
原创 Python实现批量修改图像大小尺寸
深度学习任务中,由于图像数据集的数量是非常庞大的,如果要统一修改所有图像的尺寸,则最好需要用代码来进行批处理。
2023-03-15 10:39:49
2151
4
原创 JavaScript中的this指针详解
this是 JavaScript 语言的一个关键字,它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。简而言之,this就是函数运行时所在的环境对象。
2023-03-14 10:10:22
486
原创 Windows下nvm的安装配置及使用
nvm全名叫做,是一个非常棒的nodejs的版本管理工具,主要是通过命令行实现nodejs版本的安装、切换当前使用的nodejs版本。nvm可以实现电脑安装和管理多个版本的node.js,在公司的新旧项目中需要使用到不同的 node 版本进行开发,通过nvm可以实现直接下载nodejs、随时切换nodejs版本,大大减轻了前端程序员切换nodejs版本的时间成本。
2023-03-06 13:45:23
4136
1
原创 Vue3快速上手
2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王)耗时2年多、2600+次提交30+个RFC600+次PR99位贡献者github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2023-03-02 16:16:28
662
原创 js中的定时器 setTimeout()和setInterval()
JavaScript 定时器,有时也称为“计时器”,用来在经过指定的时间后执行某些任务,类似于我们生活中的闹钟。JavaScript 中提供了两种方式来设置定时器,分别是 setTimeout() 和 setInterval()
2023-03-01 09:14:49
2214
原创 Vue+JS 获取当前实时时间
调用获取年月日等时间函数后封装到自己写的获取当前时间的getDate函数中,getDate函数会将获取到的函数重新复制给在data中定义的变量nowDate,然后设置定时器一秒调用一次getDate函数,再把定时器放入生命周期函数created中,最后用插值语法把nowDate放到指定的位置即可
2023-02-28 09:01:47
1029
原创 Vue开发中安装库报错 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR!
之前完成的vue项目文件夹在移动以后,想要重新运行下,在删除项目里的文件夹之后,执行命令时出现上述报错,导致包无法正常安装在安装内容的命令后面加上,即就可以顺利进行下载安装包的操作。
2023-02-27 16:10:27
1036
原创 VSCode中用git进行源代码管理时文件右侧字母的含义
在使用vscode中的git管理工具的时候,发现每一个文件右边都有这样一个字母标记,后来在git的官方文档里面查了一下
2023-02-27 15:08:55
370
原创 JS中Array.prototype.sort()方法详解
sort()方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的
2023-02-22 16:25:19
510
原创 防抖和节流
防抖和节流是两种应对web页面中频繁触发事件的优化方案,可以在JavaScript库Lodash中的_.debounce()以及_.throttle方法实现
2023-02-15 15:19:46
334
原创 vue项目中利用nprogress插件实现网页进度条效果
当项目中如果出现了发请求,则网页中的进度条会开始向前走,当服务器的数据返回成功以后,那么进度条则会消失。在配置axios二次封装的request.js文件中,首先引入进度条以及相关进度条的样式。经过以上配置,在发出请求之后即可在网页上方看到。如果后续中想要更改颜色等样式,在。拦截器添加进度条开始的代码。拦截器添加进度条开始的代码。
2023-01-31 10:13:03
449
原创 vue-cli脚手架初始化项目各个文件夹用途
项目依赖文件夹一般放置一些静态资源(图片)。需要注意,放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动的打包到dist文件夹中。
2023-01-25 11:29:10
1095
原创 js剪辑视频片段制作gif
用canvas生成gif图,在渲染的时候不断将canvas转成png图片,再将它们添加到gif的每一帧,设置每隔多长时间进行添加
2023-01-18 10:06:51
1136
原创 JavaScript中 join()、split()、slice()函数的用法及区别
在刷力扣时,这几个函数在字符串数组问题处理时经常会用到,但总容易搞混,现将它们总结下,方便下次查看
2023-01-16 09:48:40
565
原创 前沿性能优化解决方案(SVG、flexbox、preload/prefetch、预渲染、windowing、Skeleton)
移动端图标 SVG、flexbox、preload/prefetch、预渲染、windowing、骨架组件
2023-01-11 09:42:57
1351
原创 webpack性能构建优化
webpack4 引入了 mode 模式,可以配置开发和生产模式,就可以使用一些已经默认好的插件帮我们达到想做的效果
2023-01-06 11:28:29
1301
原创 前端性能优化的指标和工具
性能测量工具都有一些关键的时间节点,比如:TTFB、首屏,这些时间节点是通过浏览器实现特定的API获取的,所以我们也可以通过API来直接获取这些数据。3.希望所有的异步请求要足够快(1秒之内把数据返回回来) 如果不行,做压缩,还是不行,先考虑前端交互上的优化(比如加一个loading动画)假如你做的是视频网站,如果用户不再看你这个页面了,这时候需要考虑节流,不再进行视频内容的加载(可以在页面上进行 Tab 切换测试)例如,尽可能减少预加载数据,以便您的应用快速加载,并利用空闲时间加载剩余数据。
2022-12-28 16:15:18
1104
原创 使用WebPageTest、Lighthouse和Chrome DevTools评估网站性能
进入网站首页WebPageTest ,选择Advanced Configuration进行个性化定制
2022-12-27 20:12:15
1724
原创 Windows和Mac系统实现本地部署WebPageTest工具
在项目开发或者测试的过程中,由于没有上线,我们在公网上无法访问我们的网站,但同时我们又需要查看浏览器性能,这样我们就需要在本地部署WebPageTest工具以协助进行性能测试访问Docker官网文档,按需下载对应版本安装注册docker 账号3.安装后点击Docker图标,使用注册的docker id登录,并在dos中用如下命令登录。
2022-12-24 15:27:02
1581
原创 Chrome谷歌浏览器强制刷新页面(不使用缓存)
在项目开发过程中,用浏览器测试时很多时候会被浏览器自带的缓存搞得很头疼,那么下面会介绍几种方法实现Chrome浏览器清空缓存并强制刷新页面。
2022-12-23 11:54:46
11295
原创 js实现九宫格翻牌抽奖(怎么也抽不中大奖系列)
将小奖品(即官方让你中奖的奖品)中添加一个中奖项状态,定义为true,以此即可产生中奖项与非中奖项两个数组;每次翻牌抽奖时就会从非中奖项中取最后一个,并从数组中移除该项;当抽奖次数为0的时候,就把剩余的奖项全部展示出来;css定义翻牌前后两种风格,transform: scaleX(num)中num为1或0控制元素的显示与隐藏。
2022-12-22 11:42:37
1064
2
原创 js利用网址收藏栏插件实现深色主题
元素再操作一遍的目的是保持元素本身的颜色不变。的作用是将元素本身背景颜色翻转,后面对。书签插件,网站界面即可变为深色主题了。,名称命名为“深色主题”,然后在。首先,右键浏览器中的书签栏选择。后面再跟刚才写的代码,点击保存。
2022-12-21 15:37:41
347
原创 CSS实现聚光灯特效
将两个SpotLight文字完全重叠,后面那个是深灰色,前面的是亮颜色的,再将前面的文字套用圆形遮罩,最后加上CSS Animation就可以了。如果要实现渐变色,只需给伪元素添加渐变背景图片,将文字颜色设成透明,然后使用。设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。其中text属性表示背景被裁剪成文字的前景色。通过在动画序列中定义关键帧(或 waypoints)的样式来控制 CSS 动画序列中的中间步骤。使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
2022-12-16 11:25:26
1400
原创 一行CSS实现网站页面变为黑白色
以前我们要对图片进行取色,模糊等处理必须使用Photoshop等工具,而css3滤镜的出现使我们在网站中轻松实现这些效果变为可能。本次网站页面变为黑白色就是使用css3滤镜filter的grayscale属性实现的
2022-12-01 20:25:22
478
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人