木灵鱼儿

木灵鱼儿 2年前运维

Proxmox VE（PVE）安装教程

下载ISO镜像制作安装U盘官网：proxmox找到download菜单，点击进入，找到ISO Installer关键词，下载ISO镜像文件。可以看到，左边是官方直接下载，右边是bt种子，如果网络不好，用种子配合迅雷下起来会很快。下载完毕后我们还需要一个8g的u盘，当然目前镜像才1g多，所以小一点的u盘也是可以的，利用软碟通UltraISO软件将制作安装U盘。UltraISO：蓝奏云密码:5b2b解压后打开软件：文件 -> 打开 -> 找到下载的proxmox镜像文件打开后，插入u盘，再回到软件点击启动菜单 -> 写入硬盘映像 -> 硬盘驱动器选择U盘 -&g...

6186 0 0

PVE Proxmox debian

vite 兼容空值运算符[??]到旧的浏览器版本

木灵鱼儿 2年前 vue 项目实战

vite 兼容空值运算符[??]到旧的浏览器版本

前言最近同事测试落地页发现下载触发无响应，然后我为了调试方便，给他手机从酷安上下了一个谷歌浏览器，结果安装完才打开，发现页面直接就报错了，提示：vue router SyntaxError: Unexpected token '?'我开始以为是路由出现问题了，结果查了半天发现是es的新特性??语法导致的。由于vite使用的是esbuild打包，所以我在esbuild的文档上查询到，??语法最低只支持Chrome 80版本，我一看安装的版本v78，两眼一黑。看来要做一个低版本的兼容处理了。教程vite的配置选项中有一个build选项，里面有一个target目标，表示你需...

3084 0 0

vite 兼容空值运算符

pnpm iwr的方式安装后该如何卸载

木灵鱼儿 2年前教程

pnpm iwr的方式安装后该如何卸载

通过官方文档的这个命令安装的pnpm：iwr https://get.pnpm.io/install.ps1 -useb | iex但是最近这种安装安装的pnpm不再提供自我更新的命令了，而且有版本更新时每次安装依赖都会打印一个大大的提示，这就很烦，而且这种方式安装需要连接github，对网络要求比较高。个人现在使用：npm install -g pnpm包管理起来也很方便，卸载就uninstall的事。于是我找了很久，终于写到用上面那种安装改怎么进行卸载：Get-Command pnpm先查找它的安装位置，此时会返回安装的位置。再根据返回的位置使用Remove-Item "C...

3160 10 0

安装 pnpm 卸载

git 实现commit规范化+husky校验

木灵鱼儿 2年前 Git 笔记

git 实现commit规范化+husky校验

前言在面试的时候有跟一些面试者交流到git提交规范上的一些事情，有些人就会提到，他们在提交代码的时候会有一定的提交规范，如果commit提交的信息不符合要求，会被禁止提交，并且严格一点的提交后还会有人专门进行代码审查（Code Review），只有代码符合合并要求才会进行Pull Request合并。由于本人目前已经退居二线，也没想着能进入大厂学习那套规范，但是在一些技术文章中还是能够“管中窥豹”，于是我将自己的主题项目加入了git提交规范并将其记录在本章教程中。首先就是技术选型，我在了解规范时看到有两个比较常见的工具：commitizengitmoji-cli其中gitmoji-cli...

4941 3 2

git 校验 commit

Typecho 实现一个目录树

木灵鱼儿 2年前 Typecho博客教程

Typecho 实现一个目录树

前言最近发现主题的目录树很多地方不是很满意，一方面是自己对于php的知识不是很好，大部分都是从网上分析的代码中拿取cv一下就用了，加上重构主题是一个比较大的工程，所以有些地方都是奔着先跑起来再说的思路。像极了项目开发时的场景，先上线再说，用户量大了我们再优化！昨晚我看了下typecho的目录树，都使用了一个全局变量：global $catalog;$catalog是一个扁平化的数组，里面存放着按顺序提取的页面h1-h6标题数据，由于php的数组可视化巨难看，我们先通过ts的方式去了解和实现这个处理。教程[hide]$catalog的数据结构大致如下：const catalog = [ ...

2.2w 119 38

typecho 目录树

git 回退分支并覆盖远程分支

木灵鱼儿 2年前 Git 笔记

git 回退分支并覆盖远程分支

首先我们需要拿到回退版本的版本号，通过vscode可视化查看或者git log来查找。如果vscode安装了Git History插件，其实是可以通过可视化方式本地回退到指定版本。我们看到它是有两个回退的方式：soft和hard；鼠标点击对应的按钮，就会弹出提示是否需要回退，点击ok回退。如果你想用指令，他们分别对应如下：git reset --soft xxxxxxx版本 git reset --hard xxxxxxx版本他们之间区别是：--soft：回退到指定版本，但是不改变工作区和暂存区的内容，这意味着回退后原来提交的修改还在暂存区，需要手动重新提交。可以使用以下命令回退到指...

3804 0 0

git reset hard

vscode 处理尾换行符CRLF和LF

木灵鱼儿 2年前教程

vscode 处理尾换行符CRLF和LF

前言之前写过一篇关于《处理不同平台的回车处理 warning Delete ␍ prettier prettier# 不同平台的回车处理 warning Delete ␍ prettier prettier》的文章。但是这是讲了如何处理当前文件的尾换行符报错而已，这次分享在项目开发初期如何配置你的尾换行符，以及批处理方式。vscode配置尾换行符现阶段我可能更加推荐使用LF的尾换行方式，在linux和mac中都是使用这种方式，而windows中使用的 CRLF，如果存在不同系统下的开发，LF是最好的选择。而且这种方式也契合我之前分享的Prettier格式化配置。vscode -> ...

1.3w 45 0

vscode CRLF LF

node + TypeScript 环境变量方案

木灵鱼儿 2年前 Node

node + TypeScript 环境变量方案

前言主要是搞定如何在node+ts环境实现环境变量处理，包括命令携带、本地env文件、以及环境变量类型声明。教程命令携带由于windows端对于命令携带天然弱势，所以我们需要安装一个插件来实现全平台兼容：pnpm i cross-env然后在需要环境变量的命令上添加：{ "scripts": { "dev": "cross-env NODE_ENV=development ts-node ./main.ts", "prod": "cross-env NODE_ENV=produc...

4971 3 0

node 环境变量 env

vue3+ts的Prettier格式化配置.prettierrc.json

木灵鱼儿 2年前教程

vue3+ts的Prettier格式化配置.prettierrc.json

前言推荐一份最近研究的格式化配置。代码.prettierrc.json{ "$schema": "https://json.schemastore.org/prettierrc", "printWidth": 120, "tabWidth": 2, "useTabs": true, "semi": true, "singleQuote": false, "trailingComma": "no...

4977 0 0

vscode Prettier 格式化

vue3.3 必学知识点

木灵鱼儿 2年前 vue3 快速上手

vue3.3 必学知识点

前言vue3.3发布了，针对之前script setup语法糖做了许多优化，解决了一些痛点，让我感觉这写法终于能正儿八经用一用了，下面就是一些必学的知识点介绍了。官方博客说明文档：Announcing Vue 3.3Volar插件为了完整体验vue3.3的特性，我们需要将Volar插件升级到测试版v1.7.8及以上。利用组件泛型实现自动推断类型？现在组件的script上可以配置一个generic属性，用来接受泛型参数，但是我感觉官方给的示例代码没有什么实战意义。generic可以接受多个泛型，用逗号分隔，你甚至可以利用extends做一个接受的类型约束。<script setup ...

3069 1 0

jsx vue3.3 generic

vscode 安装phpfmt插件实现php代码格式化

木灵鱼儿 2年前教程

vscode 安装phpfmt插件实现php代码格式化

前言处理php代码格式化，我也是最近才摸到点门路，格式化可以帮助我们统一代码展示，并且在多人协作开发的时候，统一的格式化代码可以减少很多无效的代码diff，这点在使用git的时候深有体会。首先我们需要安装phpfmt这个插件，插件地址：phpfmt除了这个插件安装，我们本地还需安装php才可以，如果不会的话，我们可以使用小皮面板的php。首先我们需要下载一个小皮面板：PhpStudywindows下，我们下载最新版安装即可。安装完毕后打开小皮，下载一个php版本，我用的是php7.2.9nts。教程依赖安装完毕后我们需要进行配置，文件 -> 首选项 -> 设置 -> 右...

3694 4 0

vscode phpfmt PhpStudy

typescript 封装一个Cookie工具类

木灵鱼儿 2年前 TypeScript

typescript 封装一个Cookie工具类

前言之前用ts封装过一个处理本地缓存localStorage和sessionStorage的类，这次在做一些落地页的时候，对接了Facebook的像素打点，其中需要获取到像素生成的fbc和fbp参数，用于渠道统计，但是这两个参数我看了下，像素方法fbq并没有提供专门获取的方式，所以只能自己手动获取了。但是大家都知道，cookie的获取是很麻烦的，因为通过document.cookie获取的是一个所有cookie的字符串值，我们需要一个个拆分获取。如果是拿一个数据还好说，但是拿两个如果不封装的话就显得代码重复了，于是封装了一个对应的类。首先api保持和之前的一致，都是采用getItem这种...

3406 23 0

cookie 缓存 TypeScript

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

木灵鱼儿 2年前教程

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

前言这个东西困扰我很久了，Gitlens会在每个变量或者属性开头都给我搞上一句提示，你说它有用吧，平时又用不到，一直没找到有啥办法关闭，最近折腾插件的时候想着研究一下，于是这个问题就有了解决方法。直接看图说话：关闭后：这不是就舒服多了。教程文件 -> 首选项 -> 设置 -> 右上角打开设置json -> 添加下面这段配置："gitlens.codeLens.recentChange.enabled": false, "gitlens.codeLens.authors.enabled": false,保存，享受。

2872 1 0

vscode Gitlens

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

vscode 实现双击选中非下划线文字

木灵鱼儿 2年前教程

vscode 实现双击选中非下划线文字

前言前端写元素class有两个流派，一个是用短横线分割，另一个是用下划线分割，至于那些用驼峰的邪道我们就不管他们了，本来一开始其实都是用短横线的，但是短横线带来了一个非常痛苦的东西，就是没法双击全选这个文本，只能部分，而下划线在编辑器中却是天然的支持双击选中。于是衍生了这么一派，今天我们就要终结他们，天下一统，指日可待。我们可以配置一下vscode的属性，我们就可以实现短横线也能双击选中了，简直不要太爽、效果图：教程文件 -> 首选项 -> 设置 -> 右上角打开设置json -> 添加下面这段配置："editor.wordSeparators"...

2374 84 0

vscode 双击 class

vite使用了postcss导致index.html的样式也被转换了

木灵鱼儿 2年前 vue 项目实战

vite使用了postcss导致index.html的样式也被转换了

前言今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。超级尴尬，导致静态loading的样式会大小变化一下，很难受。解决的思路还是很简单的，有两种方式：添加class黑名单，这样对应的class就不会转换了；排除指定文件，该文件不会被转换；我项目使用的是rem转换，vw的转换其实配置也差不多。解决办法rem插件postcss-pxtorem配置postcss.config.js中postcss-pxtorem的配置：module.exports = { plugins: { "pos...

2590 0 0

rem postcss vw

进阶中级TypeScript需要掌握的一些类型定义用法

木灵鱼儿 2年前 TypeScript

进阶中级TypeScript需要掌握的一些类型定义用法

前言使用ts也有一段时间了，但是一直在入门阶段不得要领，看着那些热门仓库的类型定义花里胡哨的，想着自己啥时候也能这么强啊，但是日常项目开发，顶多就是定义下type、interface，用一用泛型封装一下，对于一些特殊需求，不知道该如何下手。比如：一些第三方插件它虽然提供了类型声明，但是可能个别声明没有导出，如果你想使用这个类型，该怎么办呢？我们在定义类型的时候，如果存在多个类型嵌套组合成一个大类型声明，一定要先声明小的类型，然后组合成大的类型吗？这种方式会导致大的类型在预览定义时会十分痛苦，因为只能看到小类型声明的名称，看不到具体定义的内容。这几天逛b站发现了一个宝藏视频，介绍了常用的1...

3209 1 0

exclude required TypeScript

全局声明遇到的一些问题

木灵鱼儿 2年前 TypeScript

全局声明遇到的一些问题

前提本来是想给全局window挂载一个属性，但是vite这个不知道怎么，采用之前的全局类型写法一直类型推断不出来，头疼了好久，也没想到啥原因，先把问题解决方案记一下。解决方案创建了一个global.d.ts文件，内容如下： /** 安卓套壳包提供的api */ interface AndroidEMInterface { /** 清理缓存方法 */ cleanCache(): void; } declare global { interface Window { AndroidEM?: AndroidEMInterface; } } declare const...

2431 0 0

TypeScript declare 全局声明

vue3+ts+vite4的一些踩坑实录

木灵鱼儿 2年前 vue 项目实战

vue3+ts+vite4的一些踩坑实录

全局方法挂载和类型声明全局挂载还是很简单的，照着官方的例子写就可以了，我的做法是创建了一个单独ts文件，通过app.use()的方式来进行批量挂载，代码如下：import type { App } from "vue"; /** * @description: 获取assets文件 * @param {string} path * @Date: 2023-05-05 10:05:18 * @Author: mulingyuer */ export function getAssetsFile(path: string): string { retu...

4915 236 0

自动引入环境变量 eslint

数值转百分比的方法

木灵鱼儿 2年前 TypeScript

数值转百分比的方法

要求传入一个数字，转成10%这种百分比的形式，如果存在小数则四舍五入保留2位小数，如果小数位是0则不保留。代码function toPercent(num: number): string { if (num % 1 !== 0) { let percentageNum = (num * 100).toFixed(2); percentageNum = percentageNum.endsWith('.00') ? percentageNum.slice(0, -3) : perc...

3502 31 0

数值百分比转换

nest.js 管道（类型转换和数据校验）

木灵鱼儿 2年前 Nest.js

nest.js 管道（类型转换和数据校验）

前言使用管道功能的前提是拥有@Injectable()装饰器的类，管道可以用于数据类型的转换和校验，也可以自定义实现一个管道，但是需要符合接口PipeTransform。nest官方提供了9个内置管道：ValidationPipe 一般用于全局的校验管道，后面会说ParseIntPipe 转换为整数类型，其实就是number去浮点数了ParseFloatPipe 转为浮点数ParseBoolPipe 转布尔值ParseArrayPipe 转数组ParseUUIDPipe 转uuidParseEnumPipe 转为枚举DefaultValuePipe 默认值，适用于一些参数可以不传，然后使...

4176 101 0

类型转换 nest.js 管道

nest.js 环境变量配置

木灵鱼儿 2年前 Nest.js

nest.js 环境变量配置

前言本地开发与正式环境有些配置是不一样的，比如：数据库的链接配置、环境标识NODE_ENV等、以及一些静态的全局变量之类的数据；nest主张的是模块化的形式，所以将这些东西全部包成一个模块注册使用是一个不错的办法，那么有什么便捷的处理方式呢？nest官方提供了一个插件：@nestjs/config用于处理这些东西，以及提供便捷的类型推断方式。插件文档地址：使用文档首先我们需要安装这个插件：pnpm i @nestjs/config环境变量区分我们在项目中创建一个.env的环境变量文件，这个文件只会在各自的本地存在，如果我们使用了git仓库来进行管理的话，这个文件是需要在.gitignor...

6931 70 13

环境变量 nest.js @nestjs/config

prisma 首次使用

木灵鱼儿 2年前 Nest.js

prisma 首次使用

简介prisma是一款ORM库，用于处理数据库相关内容，它通过一份Prisma Schema文件来描述数据库的结构，除了我们日常能看到的字段之外，还能看到一些链表，外键这些平时可视化看不到的内容。prisma还提供了vscode的插件用于语法提示，以及cli相关的一些便捷功能，比如将每次字段改动记录成一个sql操作，使用reset操作都会运行之前记录的sql操作。而且cli操作是入侵很小的操作，他会在当前项目创建一个单独的prisma目录用于处理相关事宜，并不会影响已写的代码。所以在使用之前我们先处理下一些依赖：vscode安装插件：Prisma格式化.prisma文件使用该插件项目安装...

4538 34 0

MySQL prisma ORM

Typecho CommentNotifier邮件回复提醒美化模板

木灵鱼儿 2年前 Typecho 主题

Typecho CommentNotifier邮件回复提醒美化模板

前言这是一个 Typecho 博客邮件回复提醒插件 CommentNotifier 的一个模板主题，由于 Typecho 更新到 1.2 版本了，之前很多插件都失效了，包括之前我制作的美化版插件也是一样的。于是找泽泽要了一份它最近用的邮件回复提醒插件，经过我的搬运，把之前的那个仿猎聘网的邮件搬运过来了。预览下载Github：Typecho_CommentNotifier_Theme_LP喜欢就点个 Star 吧使用下载 Releases 最新版即可。解压到 CommentNotifier 插件的template目录下，解压的时候要注意不要嵌套目录了，正确的结构是解压完点开文件夹就能看到具...

7004 4 10

CommentNotifier 邮件回复美化

数组Array的reduce方法有意思的使用场景

木灵鱼儿 2年前 JavaScript

数组Array的reduce方法有意思的使用场景

前言对于数组的reduce方法一直用的比较少，大多数情况下forEach\filter\map就可以满足需求，但是对于reduce一直没找到合适的使用场景，就很可惜，想用但是没用上。最近在nest的教程中看到这么一种有趣的用法，特此分享！代码在一些使用场景中，可能会使用扁平化的对象key来获取对象中的值，比如在后端中可以看到一些这样的用法：this.config.get("database.host")意思是我需要从config配置对象中获取数据库的host字段，但是config本身是存在很多配置项的，他可能会是这样的结构：{ app: { p...

2330 0 0

Array reduce

装饰器 Decorators

木灵鱼儿 2年前 TypeScript

装饰器 Decorators

前言之前了解过一些，但是因为没有做专门的笔记，最近学习nest.js的时候，到处都是装饰器，不得已重温了一下ts的装饰器，并弄个笔记记录一下。typescript提供了几种装饰器：类装饰器方法装饰器属性装饰器访问器装饰器参数装饰器在使用装饰器之前，我们还需要配置一下tsconfig.json，开启两个配置：{ "compilerOptions": { "target": "ESNext", "emitDecoratorMetadata": true, "experimen...

2269 2 0

装饰器 Decorators 类装饰器

木灵鱼儿

Proxmox VE（PVE）安装教程

vite 兼容空值运算符[??]到旧的浏览器版本

pnpm iwr的方式安装后该如何卸载

git 实现commit规范化+husky校验

Typecho 实现一个目录树

git 回退分支并覆盖远程分支

vscode 处理尾换行符CRLF和LF

node + TypeScript 环境变量方案

vue3+ts的Prettier格式化配置.prettierrc.json

vue3.3 必学知识点

vscode 安装phpfmt插件实现php代码格式化

typescript 封装一个Cookie工具类

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

vscode 实现双击选中非下划线文字

vite使用了postcss导致index.html的样式也被转换了

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

vue3+ts+vite4的一些踩坑实录

数值转百分比的方法

nest.js 管道（类型转换和数据校验）

nest.js 环境变量配置

prisma 首次使用

Typecho CommentNotifier邮件回复提醒美化模板

数组Array的reduce方法有意思的使用场景

装饰器 Decorators

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

Proxmox VE（PVE）安装教程

vite 兼容空值运算符[??]到旧的浏览器版本

pnpm iwr的方式安装后该如何卸载

git 实现commit规范化+husky校验

Typecho 实现一个目录树

git 回退分支并覆盖远程分支

vscode 处理尾换行符CRLF和LF

node + TypeScript 环境变量方案

vue3+ts的Prettier格式化配置.prettierrc.json

vue3.3 必学知识点

vscode 安装phpfmt插件实现php代码格式化

typescript 封装一个Cookie工具类

vscode安装Gitlens插件导致代码开头出现：谁刚刚改动了，以及改动的人有哪些

vscode 实现双击选中非下划线文字

vite使用了postcss导致index.html的样式也被转换了

进阶中级TypeScript需要掌握的一些类型定义用法

全局声明遇到的一些问题

vue3+ts+vite4的一些踩坑实录

数值转百分比的方法

nest.js 管道（类型转换和数据校验）

nest.js 环境变量配置

prisma 首次使用

Typecho CommentNotifier邮件回复提醒美化模板

数组Array的reduce方法有意思的使用场景

装饰器 Decorators

最近评论

博客文章RSS订阅

博客评论RSS订阅