在包目录下创建全局链接打包后执行：npm link在另一个项目中链接该包想使用这个包的项目的根目录，然后运行npm link my-package若不生效，则删除 node_modules 中的 .vite 中的 deps文件夹然后重启项目npm run dev ...继续阅读 (15)

背景chrome书签虽好，但是一旦收藏的多了就容易找不到，特别是书签过千后，虽然分类很多，但是依然不能准确搜到。书签对我来说最方便的是可以放一些公司内部文档地址，防止公开，但是当偶尔需要手机上使用时，而我手机上已经有浏览器，不想为此单独下载一个，就显得稍微麻烦了。在此基础上，自己开发了一个网址导航应用插件。功能支持分类无限层级（没有展开收起隐藏，方便ctrl+F 快速搜到）支持根据地址获取网站标题、简介，图标保存到本地（部分网站不支持，见下方答疑）支持根据公众号文章地址获取标题、简介，公众号头像、公众号二维码保存到本地支持分类私有可见设置支持站点或公众号私有可见设置，若所在分类或所在分类任意父分类设置私有，也会同步隐藏支持三种主题切换支持页面开关灯模式（暗黑和明亮）支持宽度自适应(手机，平板，pc)技术栈基于 buildAdmin + nuxt开发，前后端分离。感兴趣的可以点此查看下载。题外话，buildAdmin 这个框架用于快速开发非常方便，代码质量也很高，安利给大家。支持二开。效果本站顶部【导航站】自己在用，服务器用的腾讯云最便宜的那个。 ...继续阅读 (22)

背景：在 php + phpmyadmin 环境中，其他mysql环境同理。操作：如上图在本地开发环境的数据库管理中，选中某个需要操作的表，点击导出中的执行下载 sql 文件，在编辑器中打开该文件如果需要上传的服务器中没有这个表，那不需要更改 sql文件，直接上传即可。如果云服务器上意见有这个表只想更想某些字段，那删除CREATE TABLE开头的那段，删除ADD PRIMARY KEY所在那两行。如果只是想同步新增几条该表的数据，那在INSERT INTO那段中，把新增的保留，其他的删除即可。 ...继续阅读 (101)

背景：重装系统后运行老项目，结果一直报接口 500 错误，排查下来后发现是 unserialize 反序列化的问题。解决方案：找到项目中的cache目录，删除即可。 ...继续阅读 (49)

背景：明明 vue3 是支持多个根节点的，但是在 vscode 中还是存在提示，看着很烦想去除解决方案：打开 setting.json ，输入vetur,找到Vetur>Validation:Template,把复选框去除即可 ...继续阅读 (43)

背景：在使用nvm安装最新版的 nodejs(20.14.0) 后，想执行npm安装pnpm,结果报错Error: Cannot find module '@npmcli/config'解决方法：1、去nvm官网下载一个nvm-update.zip，解压后双击执行选择最新版进行安装。2、在 cmd 中执行nvm -v，查看是否已经安装到指定的版本，没问题后下一步，如果失败，那手动卸载 nvm.exe 去下载安装最新版的。3、在 cmd 中执行nvm uninstall 20.14.0,这里的版本就是你出错的那个版本，不一定是 20.14.0 ，卸载后，再执行nvm install 20.14.0重新安装。此时应该就可以了。 ...继续阅读 (39)

背景目前已都是用vue3相关进行项目开发，但是依旧还有vue2的工程进行维护。遇到的问题问题一：删了node_modules 文件夹 和 lock 文件后使用 pnpm install 安装，发现无法运行，排查使用了webpack 4.x.x 版本的，此版本的 babel-loader 一系列版本需要安装对应版本的才可运行解决方案：安装对应版本的依赖--save-dev babel-loader@^8.2.3 @babel/core@^7.12.0 @babel/preset-env@^7.12.0问题二：编译运行的时候出现 TypeError: Cannot read properties of undefined (reading 'spaces')解决方案：排查发现是 scss 文件中存在/*这是一个注释*/这类文本，删除即可。 ...继续阅读 (110)

在使用canvas将img的src地址转换为base64调用canvas.toDataURL()时，遇到跨域问题并报错如下Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at img.onload解决方案：在 onload 之前添加crossOrigin参数var img = new Image(); img.src = src; img.crossOrigin = ''; img.onload = function () { // todo }具体参考大佬方案 ...继续阅读 (48)

问题在开发一个thinkphp的项目时，当文件有60M上传时，发现接口返回了413报错，导致上传失败。client intended to send too large body: 64390300 bytes request解决方案基于宝塔面板、tinkphp、nginx，需要设置三个地方nginx在 nginx 中配置client_max_body_size为需要的大小 如下图调整后记得重启 nginxphp找到你这个项目当前用的版本的 php ，如下配置大小调整后也重启一下thinkphp在项目中找到文件上传的配置项，因为项目不同，可能目录结构不同，我的在config/upload.php 中上述调整完后即可生效。 ...继续阅读 (65)

背景：经常使用 devTools 里 Network 查看各种请求资源，突然发现原先的没有了，变成了如下图这种下拉框的方式，很不适应方案：如下图操作在 设置 -> Experiments（实验）-> 右侧输入net 过滤后，去掉勾选，再关闭 devTools 后重新打开即可恢复成原来界面：效果： ...继续阅读 (71)

背景看了 elementui 和 iview，都有这个问题。在 drawer 抽屉组件中复制的时候，鼠标移动的快了就会移动到抽屉外，此时抽屉弹窗就关闭了，这个交互不想要，希望在点击遮罩的时候再关闭。解决方案......export default { data() { return { drawer: false, classModel: false } }, methods: { //监测Drawer鼠标事件 mousedownDrawer(e) { // 如果为true，则表示点击发生在遮罩层 //判断事件的目标元素是否具有el-drawer__container类。如果具有该类，则classmodel变量的值将设置 为true；如果不具有该类，则classmodel变量的值将设置为false。 this.classModel = !!e.target.classList.contains('el-drawer__container'); }, mouseupDrawer(e) { if (!!e.target. ...继续阅读 (74)

方案一属性属性scrollbar-gutter可以实现该功能方法在需要的地方设置scrollbar-gutter: stable;即可，此设置会将滚动条的位置预留出来，在没有滚动条时也占位。其他属性值auto默认效果stable both-edges和stable差不多，但是左右两边都会留空白位置进行占位，让内容居中兼容性scrollbar-gutter兼容性方案二overflow:overlay,overlay属性设置后，滚动条为覆盖在上方，不会占空间导致页面抖动 ...继续阅读 (68)

现在window已经升级到了 11 ，普遍都是 edge浏览器，没有单独的IE浏览器，此时偶尔需要用到IE浏览器，可按如下方式操作第一步如下，设置允许IE加载第二步如下：使用IE重载其他如果你是个开发人员，需要 打开控制台调试，则可以快捷键win + R打开运行，输入%systemroot%\system32\f12\IEChooser.exe后回车出现如下图，选中即可进入调试 ...继续阅读 (64)

主要依赖微信自带的 canvas 的能力实现。简单实现了长文本自动换行，段落换行，自定义水印。使用场景对于某些三方社交平台，对文字长度有限制时方便的进行转为长图片发布。使用方法微信小程序中搜索文本转图输入内容，和水印名，不写水印名则不存在水印，点击下一步点击下载后的成果图如下 ...继续阅读 (60)

场景：项目中对已有的工作看板进行筛选后，希望靠左排序，实现如下图示例:代码如下：function reOrder(arr) { arr = JSON.parse(JSON.stringify(arr)); if (arr.length === 1) { // 单个场景 if (arr[0].x !== 0) { arr[0].x = 0; arr[0].y = 0; } return arr; } let xMap = {}; // 根据x的值拆分对象 arr.forEach((el) => { if (!xMap[el.x]) { xMap[el.x] = []; } xMap[el.x].push(el); }); if (!xMap['0']) { xMap['0'] = []; } function sortY(sortArr) { if (sortArr.length) { sortArr.sor ...继续阅读 (66)

原文win11 的右键菜单实在不习惯，也在网上找了不少方案，但是一个个试过去都不行，后来找到了一个可行，故在此记录。此附件针对 22H2 版本生效，其他版本未尝试。下载附件，解压后在.bat文件上右键以管理员身份运行。根据提示 输入 1 即可，电脑不需要重启。友情提醒： 不要随意下载运行网络上的.bat文件运行，运行前可打开查看内容并用杀毒软件查看一遍，此文中的文件安全可放心使用。恢复右键菜单.zip ...继续阅读 (70)

来源树结构扁平化/** * 把嵌套数组转成平铺数组 * @param data* @param childName子集节点的名称 * @return newData*/ const flatTree = (data, childName = 'children') => { if (!Array.isArray(data)) { console.warn('只支持传入数组') return [] } return data.reduce((prev, curt) => { // 有子节点的话把子节点作为一级节点递归遍历 const childs = curt[childName]?.length ? flatTree(curt[childName]) : [] return [...prev, curt, ...childs] }, []) } const generateArr = [ { id: '001', name: '节点1', children: [ { id: '0011', name: '节点1-1', ...继续阅读 (54)

原文对象恒常性：表示特定数据点的图形元素可以通过转换进行可视化跟踪。关键函数可用于提高独立于转换的性能。例如，如果您过滤一个大表，您可以使用一个关键函数来减少 DOM 修改的数量：在更新选择中重新排序 DOM 元素而不是重新生成它们。我们在 Square 使用这种技术来提高商家分析的性能，这也是 D3 比大多数模板框架更快的原因之一。Object 冻结 ...继续阅读 (52)