随笔分类 - web开发
摘要:前言 使用vue3开发项目时,碰上需要做一个视频流列表的页面,最开始是想获取所有列表数据后创建对应的video标签,这样默认获取第一帧作为封面,同时暂停视频减轻不断请求的压力。但开发后发现视频就算暂停后也会继续请求视频流,多个视频反而会导致页面卡顿。 方案 手动获取视频的第一帧,通过canvas将其
阅读全文
摘要:问题 vue2中在cesium上做倾斜摄影模型加载后页面会非常卡顿,排查模型加载代码后发现都没有问题。 但是在vue3框架搭建的项目中就没有问题。 具体表现为 CPU和内存爆满,内存持续不断大幅度上涨。页面表现为卡顿异常 vue2开发的运行情况(异常情况): vue3开发的运行情况(正常情况): P
阅读全文
摘要:前言 在维护公司一个技术栈为 vue2 + ts + unocss 的老项目时发现 unocss 在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用 unocss 时的配置没有配置完全,根据 vue-cli 的版本按照 unocss 的官方仓库里的 example
阅读全文
摘要:问题 将百度的地图按需求简单封装一下,通过 iframe 嵌入到其他网页中,根据 postMessage 传入的参数进行一定程度的交互。但是父页面传入的参数子 iframe 获取不到参数 问题所在 用了一下 chatGPT 查询一下也一无所获,都没用。通过不断排查后发现 在 iframe 中的网页还
阅读全文
摘要:问题 在vite+ts+vue3项目中时pnpm run build构建项目导致无法正常打包 解决思路 排查问题时发现禁用router插件后能正常打包,禁用掉则会导致溢出。 进一步发现是因为.vue文件过多的原因。 考虑到可能是nodejs默认的内存不够,增大内存试试。增加到24GB后可以成功打包。
阅读全文
摘要:目的 搭建一个npm内网的私有源,通过内网下载私有包,同时可以像公有包一样检查私有包的版本更新 主要流程 第一步 安装npm私有仓库框架verdaccio npm install --global verdaccio@6-next --registry https://registry.verdac
阅读全文
摘要:问题 使用 vant-cli + typescript 开发组件库时发现组件无法预览,同时根据文档在markdown文档中使用 <demo-code> 预览桌面组件时也无法显示样式。 原因 由于vant-cli相关文献较少,并且官方文档不完善,所以走了很多弯路。然后无意中去看 yarn中相关vant
阅读全文
摘要:问题 使用vant-cli脚手架 + typescript+ yarn 搭建组件库时需要按需引入element-ui组件 使用的vant-cli版本为3.11.2 由于官方文档没有涉及到这部分问题,所以尝试在vant.config.js进行按需引入的插件配置时在打包时会报太多错,报错信息说需要加入
阅读全文
摘要:使用parcel报错regeneratorRuntime is not defined 使用parcel打包部署js文件后发现控制台报错 报错信息 解决方法 Parcel使用的 Babel会生成一个 polyfill,但为避免此错误,您还需要加载regenerator-runtime运行库。 两种解
阅读全文
摘要:之前面试时碰上一道knockout.js的面试题,网上没有太多的相关资料,所以这里就记录一下。 题目 用knockout实现一个级联下拉,数据受前面的下拉控制(注意:下拉可能不是级联中下拉(可能是文本框)控制)。数据可以直接写死在页面中。下拉层级不少于4级。 A是完全级联例如(总公司-分公司-部门
阅读全文
摘要:序言 由于现在html标签是自动切换小写,所以在使用 iview 组件时如果与html默认组件同名,则 iview 组件的大写字母名字会被默认转译成全小写导致组件引入失败,由于官网上没有找到对应的解释,后来才在开发者文档中找到,所以在此记录一下. 正文 在非 template/render 模式下(
阅读全文
摘要:问题阐述 vue项目报错Unable to preventDefault inside passive event listener invocation. 显示为: 原因: 安装的default-passive-events依赖包导致的错误 解决方法 卸载相关依赖 npm uninstall de
阅读全文
摘要:定义和用法 定义 hidden 属性是布尔属性,规定对元素进行隐藏。 如果设置该属性,它规定元素仍未或不再相关。 浏览器不应显示已规定 hidden 属性的元素。 hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden
阅读全文
摘要:前言 vue-cli搭建项目中使用Element-ui和iview库的collapse组件时发现都不能很好的符合功能需求,所以打算自己实现 演示 代码 html代码 <div style="border-top:1px solid #f7f9fc;border-bottom:1px solid #f
阅读全文
摘要:在做手机web开发时 手机页面的video标签的poster预览图在360手机浏览器中被视频所覆盖无法显示,同时会出现video标签中视频只显示一半另一半黑屏的bug 错误复现 由于webstorm内置的tomcat不能在内网访问(vscode可以启动项目后访问),所以作者就直接将出现bug的页面放
阅读全文
摘要:报错信息 Failed to compile. ./src/views/home/login.vue Module not found: Error: Can't resolve 'sass-loader' 解决方案 在vue项目下新建一个vue.config.js 文件内容为 module.exp
阅读全文
摘要:介绍 ::v-deep .ivu-input-wrapper.ivu-input-wrapper-default.ivu-input-type-text{} 代码表示的是指定拥有各个css样式的对应的元素的样式的覆盖 如图所示: ::v-deep .ivu-input-wrapper .ivu-in
阅读全文
摘要:发现问题 先在 router-view的使用方法 这篇博客中完成router-view的点击跳转,之后会发现一个bug: 如果你点击 刷新 或者 回退 , router-view 中的页面会原地刷新,但侧边的菜单栏会再次回到 默认 状态,恢复到设置的默认的menuitem点击高亮状态中,就出现了me
阅读全文
摘要:vue实现发送短信1分钟间隔 效果演示 具体代码 <template> <div style="height:100%;background-color:#F8F8F8;display:flex;align-items:center;justify-content:center;"> <div st
阅读全文