Yaru11-优快云博客

原创 vue项目打包后部分图片加载失败问题总结

2、如果大图片也均转码为base64，很容易造成存储base64的js文件过大，一方面会造成资源加载时间过长的白屏问题，另一方面也会给js解释器带来比较大的负担，这样反而起不到优化的作用，而且会影响体验。1、base64的目的主要是，为了减少http请求，转为base64以后小图片可以跟js同时被加载到浏览器，而不需要多次对服务器发出图片资源请求；1、vue-cli创建的webpack模板默认会将10K以下的图片和字体文件转为base64，转义之后的图片可以显示;

2025-04-02 13:53:10 257

原创 vue3项目使用Element Plus实现图标选择器功能

【代码】vue3项目使用Element Plus实现图标选择器功能。

2025-03-27 16:03:35 261 3

原创 Vue3项目动态多表单提交与表单验证功能实现

formRefs在Vue组件的setup函数中定义formRefs。由于表单数量是动态的，formRefs通常是一个响应式对象或数组，其中键或索引对应于每个表单的唯一标识符。// 其他逻辑...</script>

2025-03-27 15:50:51 196

原创前端如何实现序列帧动画

其中，使用CSS动画和JavaScript控制是最基础且易于实现的方式，适合初学者和简单的动画需求，而Canvas、SVG和WebGL则适用于更复杂和高性能的动画场景。本文将重点详细介绍其中的方法。

2024-12-19 14:06:13 1435

原创 el-table 组件处理嵌套树形结构数据操作

vue项目el-table表格嵌套数据，实现新增兄弟节点、子节点，以及节点的删除功能。

2024-11-19 15:28:30 382

原创 JS获取IP、MAC网卡地址（兼容IE浏览器）

【代码】js获取IP、MAC网卡地址（兼容IE浏览器）

2024-10-29 10:09:15 1910

原创 vue3项目开发总结

这个Vue组件模板页面通过组件化、插槽机制、响应式数据管理和自定义参数传递等方式，实现了一个功能丰富、灵活可复用的列表查询页面。在实际项目中，可以根据具体需求对组件进行进一步的优化和扩展。2、自定义hook一个利用 Vue3 的组合式 API 来封装和复用具有状态逻辑的函数。通过封装有状态的函数，极大提高了组件的编写效率和维护性。提取一个用于获取码表数据并将其存储在响应式对象中的hook在项目的某个文件夹中（例如src/hooks），创建一个新的 JavaScript文件。

2024-10-29 09:45:21 902

原创 vue2项目升级到vue3总结

为了更快更准确的将vue2项目升级至vue3，因此在本次的升级中代码结构保持不变，后续新写的页面再可以采用组合式API的写法。（1）全局搜索 slot-scope="scope" 直接全局替换成 #default="scope"9、分页组件中的current-page.sync，修改为 v-model:current-page。elsub-menu 改成 el-sub-menu，包括样式里classname中的。5、el-dialog、el-drawer修改。三、修改配置文件及vue全局api。

2024-05-15 16:13:43 3299

原创折线图线条过多优化方案

2. 节点变化折线图：将折线图拆分，各节点的流量变化使用单独一个曲线展示。当节点数>4时，每四个节点展示一行（每行展示的个数可以配置）1. 发布流量走势柱状图：当生产环境和灰度环境流量分布差距较大时，会出现某个环境下的柱形图普遍很低，无法明显的展示流量走势。1. 发布流量走势柱状图：柱形图使用两个纵坐标，灰度环境和生产环境流量数分别决定两个纵坐标的刻度值分布，按照各自的坐标展现柱形的高度。2. 节点变化折线图：在几十个节点的情况下折线图中线条比较乱，不方便观察各节点的变化趋势。

2023-09-26 16:36:40 1171

原创基于Vue的Cron表达式

例如：在 DayofMonth使用5W，如果5日是星期六，则将在最近的工作日：星期五，即4日触发。例如：子表达式（天（星期））可以为 “MON-FRI”，“MON，WED，FRI”，“MON-WED,SAT”（5）,：表示列出枚举值。例如：在Minutes域使用5,20，则意味着在5和20分每分钟触发一次。在子表达式（分钟）里的“3/20”表示从第3分钟开始，每20分钟（它和“3，23，43”）的含义一样。因此，“*”在子表达式（月）里表示每个月的含义，“*”在子表达式（天（星期））表示星期的每一天。

2023-09-26 16:31:23 1084

原创 idea配置tomcat（解决修改jsp不能实时更新页面问题）

3、如果你的工程中没有 Update classes and resources 这个选项，只有如下选项那么请接着往下看，因为我开始也是这样的，在这种情况下你更新后只能更新classes文件中的变动，并不能更新静态文件中的变动。出现这种选项情况的原因是因为你在Deployment的选项中使用的是先将工程打成war包然后再去运行的。先remove当前工程，再次添加，添加的时候选择Artiface。你可以根据自己的需求进行设置，我这里两个都有设置。展开部署(相当于将资源文件进行展开后进行部署)

2023-09-26 16:26:18 1685

原创阿里云速搭--功能试用体验

本产品提供大量预制的应用架构模板，同时也支持自助拖拽方式定义应用云上架构，支持大量阿里云服务的配置和管理，您可以方便地对云上架构方案的成本、部署、运维、回收进行全生命周期的管理。③ 在导出价格清单对话框中，向您展示应用中各资源消费详情和成本占比，使您对应用架构的费用情况有综合的了解，确认无误，单击下一步：部署清单。⑤ 若校验失败，根据提示信息修改资源配置，修改完后，重新保存应用，然后再次单击菜单栏下的应用 > 部署应用，直至校验成功为止。资源：资源探查：自动探查阿里云已保有资源，生成架构图。

2023-09-26 16:23:56 186

原创前端性能优化问题汇总

当 <link>标签的 href 属性为空，或 <script>、 <img>、 <iframe>标签的 src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免。顾名思义，并没有实际上的提升速度，而是优化了用户体验，我们可以采用骨架屏、懒加载、合理loading，防抖、节流（减少不必要的请求）等方式让用户的等待变得舒服。多次使用到的公共代码进行提取，打包成公共模块。

2023-09-26 16:20:41 181

原创 vue项目webpack3迁移到webpack4总结

webpack4不支持extract-text-webpack-plugin，需要安装mini-css-extract-plugin代替，并配置 css-loader。1、extract-text-webpack-plugin替换成mini-css-extract-plugin。2、升级webpack-dev-server。在webpack升级的同时，对应的许多依赖也需要相应的进行升级。1、升级webpack版本，并安装webpack-cli；二、升级npm run dev。

2023-09-26 16:17:49 355

原创 Vue2与 Vue3的区别

使用组合式API，将同一个功能的代码集中起来处理，相比于传统的选项式 API，组合式 API 使代码会更加简便整洁、可读性强。2、setup 函数中的 props 是响应式的，当传入新的 props时，它将被更新。vue3：使用ProxyAPI对数据代理，通过 reactive() 函数来创建响应式对象，给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化。Vue2：使用选项类型API，选项型API在代码里分割了不同的属性：data，computed，methods等。

2023-09-26 16:12:29 391

Yr123456_的博客