在用 nvm 管理多个 node 环境时确实方便，但有时在安装的时候会遇到这种情况： 出现这个问题大多是因为是 windows 原因（具体不明，git issue 中作者这么说的） 那么怎么办呢？ 手动安装 去这里下载一个对应版本的安装包： 下载地址 比如我要安装 12 版本，就找到对应的文件夹，然后下载 zip 格式的内容： 解压后，安装到 nvm 根目录下。 根目录可以通过命令：nvm root 来查看。 直接新建一个名为 v12.22.12 的文件夹，然后将 zip 中所有文件解压到这里。 此时再看 nvm …

一直觉得 Element-plus 的亮暗切换很漂亮，最近抽时间研究了一下，技术还是比较新的，甚至在打包的时候，对应 api 还报了找不到声明的问题，也算是小坑。 吐槽一下：前端真是天天卷样式，实在搞不动了 实现原理 我们先来看一下 element-plus 的效果： 分析一下可以看出，要想实现这个效果，至少需要四步： 1、找到点击的位置 2、再找到距离点击位置的最远位置（以上图官方为例，点击的是右上角，那么最远的点应该就是左下角） 3、基于上面的点，画一个大圆 4、让这个圆动起来，实现效果切换~ 前面三个都不难，…

前阵子接到一个需求，写一个新闻类的 app，内容高度不定，而且还要可以上下翻页滑动。想了一下，最简单的方案应该就是全屏 swiper，这样我可以少些很多动作事件。 但是写着写着发现有一个问题，swiper 一般都是图片滑动，对应广告之类的，一夜一页的翻转查看，而缺少内容滑动的机制。而当我设置了内容可以滑动时，当到顶或者到底之后，缺失了全屏翻页的事件，这就很难受。只能自己去判断了。 使用到的内容： vue-awesome-swiper@^4 swiper@^5 要判断其实也不难，方案很多，但都不尽善尽美。最后发现通过…

需求 有时候我们有这样的需求：我们需要挂载一个链接地址内容到本页面。后台只会返给你一个 url 链接，此时能确定的实现方案就是利用 iframe 来渲染这个链接。比如这样： <iframe width="100%" height="500px" frameBorder="0" src="url" /> 这样就可以解决问题。 高度问题 我们知道，iframe 默认高度为150，我们经常需要自定义高度。一般来说，高度来源就两种方…

在开发中，有些时候，我们希望可以在局部实现 store，以方便数据的临时存储。 这种需求，更多是在编写单独的复杂组件，并需要打包成库时，可能需要用到。比如，在 element-ui 中，table 组件就用到了临时存储，它们内部手动实现了一个 store 对象。这当然是一个灵活的方案，但每次手写也是很不爽的。 由于 pinia 小巧，灵活，且完整的支持类型系统，所以特别适合添加在组件中。 定义 store 首先配置好 store import Vue from 'vue'; import { c…

前阵子维护 XGantt 文档，去看了看 vuepress 的官网，虽然仍然在维护吧，但基本处于半停滞状态。反倒是之前说 不太一样、定位不同 的 vitepress，倒是持续更新，并且官网明确说了重点放在 vitepress 上，而且前阵子 vitepress 已经推出了正式版，不再是预览的了。这下好了，趁有时间，索性就升个级，一次性升级到位。。。 vitepress 对比 vuepress 的优势 启动快，支持内容自动更新。相比 vuepress，它启动的感受上确实快了一些，虽然都是基于 vite，但还是有一些差…

问题 最近在写 svg 时发现，当我需要一个全屏的 svg 动画效果时，基于 viewBox 中的数字写了动画，需要从屏幕正中间向两侧展开的这么个动画效果，但是到了浏览器中永远到不了边上，总是留下一片空白。 开始以为是 padding 之类的属性，后来发现 svg 本身并不包含这些属性啊，奇了怪了。上 MDN 翻了一下，发现有一个 preserveAspectRatio 属性，突然豁然开朗，原来是宽高比的问题，原谅我 div 写多了确实比较少考虑宽高比这样的问题了。 解决方案 在 MDN 中就写的很清楚： 有时候，…

前几天准备迁移服务器，正巧打算将所有东西 docker 一下，打算着 mysql、wordpress 都放在 docker 中，想着挺简单，中间也遇到了一些坑，小记一下。 安装过程 安装 mysql 新服务器直接装了宝塔面板，直接装 docker，然后安装 mysql 多版本管理器： 安装 8.35 版的 mysql，直接输入端口和密码即可： 安装好数据库后，新建一个数据库。在 数据库 页面中，添加 mysql 的远程数据库，输入刚才的内容，如果可以点确定，就说明连接并新建成功。 然后添加数据库，这里直接选择指定 …

在 vue3 中，如果在 v-for 中直接给子组件双向绑定数据，会报： 这是因为我们使用 v-for 将一个数组循环出来，每一个数据都应该是只读的。此时，我们如果需要修改数组内的数据，应该使用下标： <template v-for="(item, index) in dataList" :key="item.id"> // 错误写法 <ChildComponent v-model="item" /> <!-- 这样写会报错 …

我们拉取一个 docker 镜像后，为了可以保持最新，总是要定期检查仓库中的镜像是否最新，如果有更新，需要手动更新，然后重启 docker 容器，很是麻烦。 这里推荐一个自动监控更新镜像 -- watchtower，它会监听镜像，当有更新时自动更新，并自动重启容器。但是它不会更新自己。 1、拉取并运行镜像。我们使用 containrrr/watchtower docker run -d --name watchtower -v /var/run/docker.sock:/var/run/docker.sock co…