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