qq_52030218的博客

原创 webpack常见优化方法

3. 配置 externals。6. 使用 gzip 压缩。// 代码中使用动态导入。2. 优化第三方库的引入。

原创 flex与grid

* Grid 布局示例 *//* Flex 布局示例 */

原创 vue3使用vue3-video-play播放m3u8视频

3.使用拖拽移动组件vue3-draggable-resizable，将视频放入这个盒子中，可以自由拖动位置，调节大小。5.结合使用vue3-draggable-resizable和vue3-video-play。其中VideoPlay的宽度和高度都写为100%，这样视频的大小就可以跟随窗口的大小放大缩小。4.使用vue3-draggable-resizable。1.安装vue3-video-play。

原创 vue3使用vue3-draggable-resizable

可移动，放大缩小关闭。

原创 vue3使用video-player实现视频播放(可拖动视频窗口、调整大小)

这样就可以实现视频窗口的放大缩小移动。

原创 echarts仪表盘

【代码】echarts仪表盘。

原创 echarts方向仪表盘（罗盘图）

【代码】echarts方向仪表盘（罗盘图）

原创 vue3动态设置高度（根据屏幕大小调整）

现在有一个表格，需要固定高度，当我们传入一个固定的高度时，在不是全屏的状态下看没问题。这里我表格使用的是iview组件，这样子全屏状态下就没有一大片空白了。设置height等于一个变量，

原创 vue3简单使用路由守卫

在登录之后，我们会存储一个token，并且设置一段时间的有效期。本身没有过期机制，所以需要自己实现一个。一种常见的方法是在存储。的同时，也存储一个时间戳，这里表示。的过期时间（2个小时后）。

原创 vue3简单使用vuex

今天使用vuex存储一个用户名，在登录组件中得到username,然后在其他组件中使用这个username,下一步去登录组件中赋值，将用户名存储到vuex中，这样就可以在这里使用username了。映射完成后就可以使用username了。存储好了就可以去使用了。

原创 vue3中使用viewui中的message组件

直接从 view-ui-plus中导入Message，然后就可以不用this了，直接Message.success('登录成功');这是view-ui官网的方法，我们在vue3中使用发现是没有提示的，因为vue3的组合式api无法使用this，在vue3中我们继续使用选项式api，在methods中定义我们的方法，这样也可以使用this了。

原创 vue3跨域

该方法需要安装axios 方法：npm install axios。vue3项目请求一个网址发生跨域问题，

原创 [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(＜inner-selector＞)

警告：[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.语言，在使用穿透语法时，已更改为建议使用。

原创 使用pm2在服务器中持久运行vue3项目

在项目中新建一个文件夹pm2,在文件夹中新建pm.js文件。

原创 vue3使用vuex缓存某个值

要使用 Vuex 来实现状态管理，并在页面刷新后保持某个状态（如 name），你可以将状态存储在 Vuex 的 store 中，并使用 Vuex 的持久化插件（如 vuex-persistedstate）来在页面刷新后恢复这些状态

原创 vue3使用keep-alive缓存组件(非路由组件）

Vue 的 组件可以缓存不活动的组件实例，而不是销毁它们。这样，当你切换回之前查看的组件时，它的状态会被保留。

原创 Selenium 爬虫

一些网站通过 JavaScript 动态加载内容，这时普通的请求库无法抓取完整数据。通过 Selenium 这样的浏览器自动化工具，可以抓取这些网站的内容。高端爬虫的一个常见问题是反爬虫机制，如 IP 封锁或用户代理识别。可以通过使用代理池和随机用户代理来避免这些问题。是一个强大的爬虫框架，适用于大型项目，支持高效抓取并行化、自动处理请求错误，还可以轻松扩展成分布式爬虫。一些网站通过验证码或登陆页面进行限制。这样可以在多个机器上运行爬虫，自动去重和分发任务。这样的队列系统，实现分布式的任务分发和管理。

原创 python 爬虫

首先，确保你已经安装了所需的库。

原创 web图片上下空隙去除

在前端开发时，图片出现上下空隙的问题通常与HTML中图片元素（<img>）的默认行为或CSS样式设置有关。这种情况经常出现在图片与文字或图片与图片之间，尤其是在使用行内元素（如<img>默认是行内元素）时更为常见。

原创 js中如何判断数据类型

在JavaScript中，判断数据类型是一个常见的需求，但由于JavaScript的动态类型特性，直接判断一个变量的类型并不总是那么直观。JavaScript提供了几种方式来判断数据类型，每种方式都有其特定的用途和限制。

原创 CSS选择器优先级

通配选择器（*）的优先级最低，选择符（如+、>、~）和逻辑组合伪类（如:not()、:is()、:where()、:has()）本身不影响CSS优先级，而是根据参数中具体的选择器进行计算。CSS选择器的优先级决定了在多个选择器同时匹配一个元素时，哪个选择器将应用于该元素。综上所述，CSS选择器的优先级是一个复杂的系统，涉及多个因素。当多个选择器具有相同的优先级时，将根据它们在样式表中的出现顺序来决定最终的应用顺序。后出现的样式将覆盖先出现的样式。它们的优先级相同，但低于ID选择器，高于标签选择器。

原创 vue组件

Vue 组件是 Vue.js 应用程序的基本构建块。它们是可复用的 Vue 实例，带有预定义的选项。组件系统让开发者可以通过小型、独立和可复用的单元来构建大型应用。每个 Vue 组件都包含了自己的模板（HTML）、逻辑（JavaScript）和样式（CSS），这些元素封装在一起，形成了一个可复用的单元。

原创 ucharts标记线

在ucharts上添加标记线，本例为uni-app组件方式。

原创 vue修饰符

除了内置指令如v-model和v-on之外，你也可以在自定义指令中定义和使用修饰符。在自定义指令的绑定值中，可以通过// 当被绑定的元素插入到 DOM 中时……// 检查是否存在修饰符}, true);// 聚焦元素el.focus();});// 使用修饰符这些修饰符极大地提高了 Vue.js 应用的灵活性和表达能力。

原创 axios

axios是一个功能强大的 HTTP 客户端，它简化了 HTTP 请求的发送和处理过程，并提供了许多高级功能，如拦截器、取消请求等。通过使用axios，你可以更加高效地处理 HTTP 请求，提高你的前端开发效率。

原创 动态页面（css实现）

第二层 (`layer2`): 包含两个子元素，这些子元素水平排列，布局为两列，每列占据容器的 50% 宽度（减去间距），高度也是根据 JavaScript 计算的。- `.a1`、`.a2`、`.a3`、`.a4`: 这些类代表层次中的子元素，设置了圆角边框、阴影效果和渐变背景。- 在较宽的屏幕上，`.layer1` 显示四个均匀分布的元素，`.layer2` 显示两个并排的元素，`.layer3` 显示一个单独的元素。- 在 `.layer3` 中，单个元素的宽度占据容器的全部宽度减去间距。

原创 vue route

然后，定义你的路由，每个路由应该映射一个组件。

原创 nvm npm nrm

这三个工具（nvmnpmnrm）共同构成了 Node.js 开发者日常工作中不可或缺的一部分。nvm用于管理 Node.js 版本，npm用于管理项目依赖，而nrm则用于优化 npm 镜像源，提高开发效率。

原创 vxe-switch绑定number类型

但是点击开关没有反应这时候需要同时修改row.enableState。

原创 cookies

Cookies，中文名称为小型文本文件，是一种在Web浏览器和Web服务器之间传递信息的技术。它最早由美国的Lou Montulli于1994年发明，通过在HTTP响应中添加一个Set-Cookie字段来设置。当浏览器收到此响应时，会将这个Cookie存储起来，并在后续的HTTP请求中将其发送回服务器。这种机制允许服务器记住用户的偏好、登录状态等信息，从而提供更加个性化的用户体验。

原创 nextTick()

nextTick()是 Vue.js 框架中的一个重要方法，它用于在下次 DOM 更新循环结束之后执行延迟回调。在 Vue 的异步更新队列中，如果你需要在 DOM 更新完成后立即执行某些操作（比如基于新的 DOM 状态来获取元素尺寸或进行 DOM 操作），nextTick()就非常有用。Vue 的响应式系统会自动追踪依赖并在适当的时候更新 DOM。但是，这个更新是异步的，Vue 会等到同一事件循环中的所有数据变化都收集完毕后，才会执行 DOM 更新。

原创 es6新特性

es6

原创 echarts