使用 @vue/cli 脚手架构建的 Vue 全家桶项目，默认配置下，打包后会把 vue、vue-router、axios、vuex、element-ui、echarts 等公共库打包在一起，导致基础 chunk、vendor 包体积特别大，有时一个文件能达到 3-5MB，这会大大影响首次加载速度。因此需要抽离第三方公共库，配合使用 CDN 加速。

阅读全文

有些框架中内置了常用的事件修饰符和按键修饰符，例如：Vue 中就提供了按键 .enter（.13），修饰键 .ctrl、.alt、.shift、.meta等修饰符，简化了很多快捷键功能的实现。在 Svelte 中也提供了 preventDefault、stopPropagation、once 等事件修饰符，但是没有内置快捷键修饰符。

阅读全文

在使用 Crontab 定时任务和 Shell 脚本切割 Nginx 日志文件时，要用到时间戳、当月、上月、下月、上月初、上月末、下月初、下月末等等，其中有些日期不能直接获取，需要经过一定的计算才能得到。

阅读全文

在移动端开发过程中，如果要实现一个元素或按钮的拖动定位，会出现很多坑。例如：元素上下移动过程中，会触发 body 的 scroll 事件，导致整体的位置偏移，这时就需要 阻止移动端 touchmove 与 scroll 事件冲突 。

阅读全文

浏览器 Window 内置的 URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串，再也不用 & 字符串分割的方式去解析 url query 参数了。

阅读全文

怎么来衡量一个web端项目的大小，一是看页面多少，二是看源代码行数。页面多少比较好统计，通过 Router 的配置大概就能知道。但是源代码行数，如果要一个文件一个文件去计算，那就费了劲了。有问题有需求，就会有人造轮子。本文就介绍一下 代码统计工具cloc的安装与使用。

阅读全文

最近做了自己的开源项目 Msw-Tools，参考了 VConsole 工具中按钮的拖拽功能，计划给 MSW 按钮也增加类似的拖拽效果，并兼容PC端和手机端，但是遇到一个问题：一个按钮绑定了多个事件，怎样才能阻止 mousemove 或 touchmove 与 click 事件同时触发。

阅读全文

在使用 Vue 、React 等MVVM框架开发项目时，基本上很少需要直接手动去操作 DOM 了，但是也不可避免，例如获取元素的宽高、元素在屏幕的XY位置、DIV拖拽等等。随着 Vue 版本的升级，在 Vue3 中获取真实DOM的方法也有了变化。

阅读全文

ElementUI 的 Notification 组件通常用于全局的通知提醒消息，其中展示内容默认是文本字符串，当然也可以设置 dangerouslyUseHTMLString: true 后传入 HTML 片段。如果要展示比较复杂的动态内容，一般会把传入的内容封装成组件，而直接传入组件是无法渲染的，本文就是解决 $notify 中怎么渲染自定义组件的问题。

阅读全文

Nginx 日志会随着时间和访问流量的增加而日益增大，access.log 日志文件也会随之越来越大，最后会导致日志的读写效率下降，进而影响 Nginx 服务的性能。因此，需要对 Nginx 日志文件进行切割，本文就介绍一下：使用 Crontab 定时任务执行 shell 脚本来切割 Nginx 日志。

阅读全文