- 博客(39)
- 收藏
- 关注
原创 ERROR context.outputFileSystem.lstat 报错原因
从上面的报错来看大致是在使用Webpack打包工具时和nuxt依赖有关,然后去看了package.json里的版本和下载的依赖版本是否有差异....在JavaScript的包管理工具npm中,~(波浪号)和^(插入符号)是用于指定依赖版本范围的符号,它们有不同的含义在JavaScript的包管理工具npm中,~(波浪号)和^(插入符号)是用于指定依赖版本范围的符号,它们有不同的含义。
2024-08-28 09:43:41 186
原创 vue2自定义-多选下拉框
vue2自定义多选下拉框。这是一个多选下拉框的组件,简单弄了一个样式,后续有时间可以会加一下动画效果啥的,现在将就着用先。通过父组件传入数据可以实现多数据多页面的复用。感兴趣的可以直接跑一下。
2024-08-26 17:21:56 233
原创 前端性能优化-实测
今天测试网站性能的时候发现一个问题,一个h2标签内容为什么会占据这么长的渲染时间,甚至有阶段测到占据了7000多毫秒,使用了很多方法都不能解决,包括了修改标签,样式大小等,当我把它彻底删掉才没有出现这个问题,但是这个地方是不能删除这个标题的,以至于一直卡在这个地方并将我的性能评分卡在30-40内。首先这个网站字体样式使用了字体包,在未下载完字体包时阻碍了页面的显示,这就是为什么单这个标签的内容就渲染了这么久。解决方式也很简单,在使用字体包的引入中使用。属性,这个属性特别适用于自定义字体加载时的用户体验。
2024-06-27 16:58:53 182
原创 VSCode运行前端项目-页面404
发现打开的页面重定向到404:http://19x.xxx.x.xxx:9803/404;打开CDM输入:netstat -ano|findstr "9803"再输入:netstat -ano|findstr "9803"就输入:cd c:\WINDOWS\system32\。输入:taskkill /F /pid 5528。执行完上面的步骤,重启一下项目就可以了。找到后面4位数的进程号通过命令结束进程。
2024-06-25 15:10:23 398
原创 解决Chrome浏览器打开flags页面时出现黑屏问题的方法
当我们在使用Chrome浏览器并尝试访问flags页面时,遇到屏幕短暂闪烁或变黑的情况,这可能与启用的硬件加速功能有关。硬件加速是Chrome浏览器的一个功能,旨在利用计算设备的GPU来提高视频播放和图形渲染的性能。然而,在某些情况下,这个功能可能导致不稳定性,尤其是在播放视频时,可能会经历短暂的黑屏、黑块或屏幕闪烁,可通过在设置页找到硬件加速选项,进行关闭后重试(重启浏览器或电脑),如果还是没有解决就用下列方法解决。最后可以设置一下屏幕的高性能模式,进入设置->系统->屏幕->显示卡->图形设置;
2024-03-29 16:45:38 1240
原创 按需自动加载 Element Plus 实测
按需加载是一种优化策略,可以提高前端应用程序的性能、用户体验和可维护性。在使用 Element UI 或其他大型 UI 组件库时,通过按需加载可以最大程度地发挥其优势,确保应用程序的性能和可扩展性得到有效的管理;我们解决完unplugin-auto-import之后出现的第二个报错提示,我们也是通过执行执行降版本回退的形式进行解决;减少初始加载时间,降低资源占用,优化用户体验,灵活性和可扩展性,节省带宽和资源成本等。这有可能是我们的插件版本过高导致的报错提示,执行回退版本到0.16.1;
2024-03-29 09:26:33 798
原创 computed计算属性的妙用!!!
vuejs的computed熟悉吗?有效的做好页面结构的优化呢?经过简单的两个操作就可以做到让页面更加整洁,也更好维护,这就是计算属性的魅力。1.首先遍历出页面结构,使页面更加整洁,也更方便后期的维护...
2024-03-21 17:54:43 140
原创 Element-Plus Dropdown 下拉菜单样式修改
Element框架是我们开发最常用到的一款UI框架,现在就直接演示怎么解决,el-dropdown 下拉菜单样式....亲测有效。
2024-03-21 11:32:00 1438
原创 text-wrap: nowrap; 无效属性的解决方式
在CSS中,text-wrap 并不是一个标准的属性,可能是一个错误的属性名或者是特定库或框架的扩展属性。如果你想要控制文本是否换行,可以使用w...
2024-03-07 15:11:30 1606
原创 vue3+element-plus el-input 自动获取焦点
虽然element有提供input的autofocus属性,但是当我们第二次进入页面就会发现autofocus已经不再生效,需要通过onMounted去触发input的focus解决这个问题。
2024-03-07 10:00:49 3374
原创 Vue+Clipboard.js 的使用
Clipboard.js是一个JavaScript库,用于在浏览器中实现复制和粘贴功能。它提供了一种简单、可靠且跨平台的方式来处理剪贴板操作。使用Clipboard.js,你可以轻松地将文本或图像复制到剪贴板,并在需要时从剪贴板中粘贴内容。它支持多种浏览器,包括Chrome、Firefox、Safari和Edge等。到这里就完成了对Clipboard.js的一个基本使用了,其他功能可以直接访问。1.安装Clipboard.js库;
2024-03-05 10:28:19 702
原创 Nuxt2+Vue2 使用Elemenet-Ui
在Nuxt的项目中如何使用ElementUI?简单三步教你如何在Nuxt项目中使用Element-Ui...
2024-02-28 15:03:32 609
原创 swiper 5.2.0版本,H5出现不能左右滑动切换问题
在上面代码中,如果我们在swiper-wrapper后面还新增了一个自定义的class类名:wrapper_node的话,就会导致H5不能进行左右滑动切换。把自定义的class类名wrapper_node删除就可以了。
2024-02-06 16:54:58 692
原创 nuxt 初始化报错 ERROR Error: Failed to download template from registry: fetch failed
这个时候可能会出现:ERROR Error: Failed to download template from registry: fetch failed。在电脑本地hosts文件末尾添加这行参数:185.199.108.133 raw.githubusercontent.com。当我们想要初始化一个nuxt项目时,执行:npx nuxi@latest init 文件路径:C:\Windows\System32\drivers\etc。最后从新运行就可以了,亲测有效!
2024-02-06 16:40:20 965
原创 如何查看自己的ssh
如果您的密钥文件名不是默认的id_rsa.pub,请将命令中的文件名替换为你的公钥文件名。当我们很久没使用过ssh,怎么去查看ssh呢?1.打开我们的git bash窗口,输入。来查看,找到id_rsa.pub文件。通过上面两步,就能拿到ssh!3.查看公钥,您可以使用命令。
2024-01-11 11:41:38 2354
原创 uniapp开发
优点:可以向指定路径推送消息,打开对应页面,实现与应用内部组件之间的无缝连接;优点:可以在应用程序中重新启动指定页面,并保持之前的状态和数据;需要注意的是,不同的编译器和预处理器可能会支持不同的宏定义,因此具体的支持情况可能会有所不同。缺点:只适用于Tab页间的切换,无法实现页面之间的跳转;优点:可以跳转到任意页面,支持带参数的路由跳转;优点:可以将页面重定向到其他页面,避免刷新整个页面;缺点:跳转时会刷新整个页面,影响用户体验;相比,缺少了页面切换时的动画效果;优点:可以实现快速切换Tab页的效果;
2023-12-22 16:47:48 77
原创 GitHub Actions发布NPM -- 自动部署
关于如何使用GitHub Actions自动部署NPM和过程中遇到的问题,以及解决办法。通过详细步骤截图,让你可以0基础也能完成操作,实现使用github自动部署npm包。
2023-12-22 16:47:15 442
原创 uniapp 苹果支付内购
如果是本地打包,需要在xcode配置,liblib..两个文件,feat?需要在app store 中配置商品信息,并且需要添加银行卡等。需要在uni中manifest.json打开内购开关。案例:(可能会出现丢单,需要特别处理)暂时这样以后更新...
2023-10-09 14:42:54 579 1
原创 Uniapp 手动关闭启动页的Splash图
当我们做uniapp项目时,需要做后端控制显示版本,如果使用组件切换实现时就会出现版本UI切换太明显的情况,此时我们可以利用启动页动画的手动关闭的方式进行一个暂时的遮挡,等页面切换完成之后再让启动页关闭,首先进入。做完上述步骤后,直接在代码逻辑中使用以下代码进行关闭启动页动画。等待首页渲染完毕后再关闭Splash图。
2023-08-02 17:33:56 2234 2
原创 点击标题滚动到指定位置
比较直接一点的是使用a标签自带的锚点,如下所示,但是这样进行跳转页面显示的效果会比较生硬;所以我们可以使用scrollIntoView() 方法,该方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。scrollIntoView() 方法不仅可以控制显示位置,还能设置滚动过度时的动画效果,会有比较好的用户体验。如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。behavior 可选。
2023-06-08 14:25:35 758
原创 electron+vue报错
3. 客户端或服务器端代码问题:如果客户端或服务器端代码存在错误或漏洞,可能会导致 WebSockets 连接被终止。1. 网络问题:如果网络出现问题,例如断开连接或延迟,可能会导致 WebSockets 连接被终止。2. 服务器端问题:如果服务器端发生故障或崩溃,可能会导致 WebSockets 连接被终止。这个错误通常发生在使用 WebSockets 进行通信时,表示与远程服务器的连接已经被终止。3. 检查客户端和服务器端代码是否存在错误或漏洞,并修复它们。
2023-05-31 15:01:33 859
原创 vue2移动端适配 -- px转rem
postcss-pxtorem 则是一个 PostCSS 插件,它会将 CSS 中的 px 值自动转换为 rem 值,同时也支持指定 px 和 rem 的转换比例、指定不需要转换的属性等功能,让我们可以方便地进行移动端适配。amfe-flexible 是一个用于设置 rem 基准值的库,它能够根据屏幕尺寸动态地调整 rem 的值,从而达到移动端自适应的目的。我们再写移动端网页的使用,当我们拿到750px大小的蓝湖ui图,此时我们该如何让它能和移动端适配呢?此时我们就完成了移动端的适配并让px转化为rem。
2023-04-19 11:39:39 2024 1
原创 JavaScript 操作数组的常用和不常用方法
这个例子中,对于数组中的每个元素,将其乘以2并将其放入一个新的数组中。reduceRight():从数组的右侧开始对数组中的元素执行一个函数,并将结果累积到一个值中。flatMap():对数组中的每个元素执行一个函数,并将结果压缩成一个新数组。reduce():对数组中的元素执行一个函数,并将结果累积到一个值中。filter():根据指定条件过滤数组中的元素,并返回一个新数组。map():对数组中的每个元素执行一个函数,并返回一个新数组。shift():从数组的开头删除一个元素,并返回该元素的值。
2023-04-17 17:54:37 87
原创 关于svn的使用
在一些项目中我们会使用到 TortoiseSVN这个工具。文档中将详细的会教你如何拉取svn项目到本地以及如何提交svn代码。
2023-04-12 14:12:48 16677
原创 关于process.env.VUE_APP_BASE_URL的使用 -- Vue2
是一个 Vue.js 中使用的环境变量,可以用来存储一个应用的基本URL地址,例如 API 服务器的地址。在 Vue CLI 3 以上的版本中,当你在项目根目录下创建一个名为。则是一个自定义的环境变量。这个变量可以在 Vue.js 代码中通过。你可以在 Vue.js 项目的任何地方通过。其中 [mode] 是你的模式名称,例如。的值,那么这个值就会被自动注入到项目中。的值,自动加载对应的环境配置文件,例如。表示当前运行的环境是开发环境。在运行项目时,你就可以使用
2023-04-11 14:31:57 9698
原创 vue项目中如何添加UI给的字体包
在src目录下创建一个assets文件夹用于存放我们的一些样式文件,然后再当前目录下再创建一个fonts文件夹用于存放UI给的字体包:如下所示。在很多项目中我们会使用到UI给我们的特定字体,那我们在项目中如何使用呢?在man.js中引入刚刚写好的public.css。然后再vue页面中就能直接使用了。
2023-04-11 14:05:18 1143
原创 如何在uniapp中使用uView --- 超详细
你还记得在HBuilder中使用uView吗,手把手教你如何在HBuilder中使用uView组件库。
2023-03-29 09:11:06 4995
原创 vue3+element-ui el-collapse折叠面板 箭头方向和位置的修改
关于如何修改elment-ui中el-collapse手风琴组件;在开发中我们经常会对element-ui进行样式的修改,有时候很难找出相对的样式class名称,以下是可以对el-collapse位置和箭头方向的修改class,如样式不生效可以进行添加样式穿透(deep)
2022-12-08 12:37:30 6968
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人