木灵鱼儿

木灵鱼儿 1年前 Git 笔记

git 将本地git仓库关联到远程仓库

前言在一些练习demo中，我们常常会使用cli工具去创建一个项目，不管这个项目是前端还是后端的，大部分情况都会顺带帮你初始化一个本地的git仓库，有的时候倒是无所谓，但是有时候我们可能需要将这个demo项目上传到远程仓库上去。比较费事的做法就是先在远程仓库管理里创建我们需要的git仓库，然后本地拉取，再将demo文件cv过去，再上传。有点麻烦，其实我们可以通过简单的命令将远程仓库地址直接关联到本地上去，这样我们就可以不需要cv操作了。教程我们先在远程创建我们的自己的仓库地址，假设地址为：https://gitee.com/ssss/sss.git。我们进入到demo项目，输入命令：git...

2436 0 0

git 本地仓库远程仓库

约束项目中的包管理为指定包管理器

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

约束项目中的包管理为指定包管理器

前言最近发现这个很有意思的配置，可以让项目中强制使用指定的包管理器，其他人瞎鸡儿用的话就会报错阻止，这个配置其实在pnpm的官方文档里就有，只是一直都没发现。这里贴一下出处：Only allow pnpm下面开始教程。教程在开始之前我们需要了解一下，npm在安装包的时候其实是有一些预设的生命周期脚本的，当然这些脚本其实就是package.json中的scripts定义的命令，官方预设了一些名字，当你添加对应的脚本名字和内容的时候，npm会在install的生命周期中去运行对应时机的脚本命令。生命周期文档：npm-install示例：{ "scripts": {...

2738 3 0

yarn npm pnpm

git 将a分支的内容强制替换b分支，使其完全相同

木灵鱼儿 1年前 Git 笔记

git 将a分支的内容强制替换b分支，使其完全相同

前言有的时候我们在并行开发一些内容的时候，会遇到需要将两个版本打平的情况，比如将a分支的内容全部替换到b上，以它为基础再进行开发。此时我们的b分支已经不需要自己之前开发的哪些内容，我的做法就是完全替换，git 的提交记录也没有了，省的文件冲突了。教程我们先切换到需要被覆盖的分支b：git checkout b然后通过reset命令进行重置：git reset --hard a如果你是首次拉取的仓库，那么a分支可能需要替换成：origin/a此时b分支的内容全部被覆盖了，理论上不需要再提交到远程仓库的，不过以防万一还是补一下：git push -f origin b其他做法方式有很多，这里...

3828 2 0

git reset 分支替换

vite+vue3 代替require()的hooks

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

vite+vue3 代替require()的hooks

前言最近发现动态去拼接资源路径还是挺常用的，于是把我之前封装的hooks单独分享出来。教程useAssets.tsexport function useAssets() { /** 前缀补路径斜杠 */ // eslint-disable-next-line @typescript-eslint/no-unused-vars function addPrefixSlash(path: string) { return path.startsWith("/") ? path : `/${path}`; } /** ...

2991 20 0

vue3 vite hooks

简单的对接web版谷歌登录

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

简单的对接web版谷歌登录

前言这段时间对接了下web版的谷歌登录，总体来说坑非常多，即便到现在，我都感觉这个教程都只能算是一个应急处理方案，并不完美，缺点如下：文档稀少，官方提供的教程自由度很差ui不可控，前端无法自定义触发按钮不多说，开搞！教程官方文档和流程官方文档：web谷歌登录流程：我们需要先去将需要web登录的域名去向谷歌申请一个客户端id，用于在客户端登录处理。申请地址：开发者后台创建凭据 --- 选择OAuth 客户端ID --- 应用类型选择 web应用 --- 自己填写一个名称已获授权的 JavaScript 来源这个选项意思就是你允许使用这个客户端id对应的网站域名，添加对应的网站地址，个人测试...

6448 0 1

web 谷歌登录

修复pinia使用setup语法导致$reset报错

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

修复pinia使用setup语法导致$reset报错

前言在pinia中使用setup语法是非常舒服的一件事情，但是也会有一些坑点，其中就是当我们使用store.$reset()进行重置的时候会发生报错：Store "xxxx" is built using the setup syntax and does not implement $reset()意思是$reset并没有实现，我们需要自己手动实现这个。教程解决办法我是从stackoverflow看到的，这里放出出处：《Pinia: $reset alternative when using setup syntax》我们需要创建一个插件去实现这个功能：stores...

3487 18 0

pinia setup $reset

ts封装websocket，支持失败重连、心跳、事件订阅

木灵鱼儿 2年前 TypeScript

ts封装websocket，支持失败重连、心跳、事件订阅

前言一直很想体验下websocket，苦于一直没有机会，乘着这次优化，封装了一个原生的websocket处理类，本来是想用Socket.io的，但是它只能和它配套的server端使用，对于一些非封装的服务端，没法直接使用，于是只能自己封装了。功能：支持失败重连支持心跳支持重新初始化事件订阅ts愉悦的类型推断，传入事件名和回调函数，能自动推断出结果类型支持手动断卡，重新初始化即可重新连接为什么需要重新初始化，因为我们的spa项目中，用户退出登录需要断开socket连接，用户登录后又需要重新连接，所以重新初始化承接的是切换用户重连的功能。事件订阅是由于socket传递消息全靠原生的onmes...

5412 52 12

websocket 失败重连心跳

ts中any、unknown、never类型的使用

木灵鱼儿 2年前 TypeScript

ts中any、unknown、never类型的使用

any类型在ts中我们只有有很多类型，比如：string、number、boolean等等，那么any这个类型怎么去理解呢？我们可以将其看做是一个超级类型集合，下面举个例子：type A = string; type B = number; type C = string | number; type D = string | number | boolean;可以看到，C和D里面都包含了string和number，那么他们都可以包含类型A和类型B，而any类型则是一个包含都有类型的一个集合。因为包含了所有，所以它可以很自由的去使用，从某种角度来看，any就是告诉ts，不需要来检测我...

1913 0 0

any unknown never

ts中大小写类型的区别

木灵鱼儿 2年前 TypeScript

ts中大小写类型的区别

前言最开始的时候写ts的时候遇到过这种问题，为什么String类型不能赋值给string类型，他们不都是字符串吗？在js中不是万物皆对象吗？同类型为什么不可以？const a: string = "a"; const b: String = a; const c: string = b;可以看到string类型可以赋值给String，而String类型不能赋值给string。解惑在JavaScript中，String、Number这种被称为包装器，你可以理解为他是一个类或者是构造函数，它返回的是一个对象，而string是一个字面量，被称为原始数据类型。原始数据类型（P...

4163 27 3

对象类型小写类型大写类型

pinia 5 大顶级技巧解析

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

pinia 5 大顶级技巧解析

前言pinia的作者最近在博客上放出了一篇pinia的使用文章：《My Top 5 Tips for using Pinia》，里面讲述了5个一般不怎么知道的使用技巧，但是由于讲的很浅，我这边自己理解了一下，做了一些解释，顺带记个笔记。不要创建无用的 getter这点我感同身受，在最初学习vuex的时候，前辈们总是会说，getter有缓存，性能会更好，于是，在大多数的教程中，我们总是能看到这种示例写法：export default Vuex.Store({ state: () => ({ counter: 0 }), getters: { ...

2748 4 0

inject pinia getter

Debian12 换源（更新依赖）

木灵鱼儿 2年前运维

Debian12 换源（更新依赖）

前言本来debian在安装的时候就可以选择国内的源，本来我以为这样就行了，不用自己在手动换，结果今天在使用更新命令时就给我卡住了，开始请求官方源了。难崩，还得自己换源解决问题。教程我们需要打开源文件：/etc/apt/sources.list ，你可以使用nano编辑或者ssh软件自带的文件管理功能修改文件。将里面deb和dep-src全部注释，注意这个注释是在每行前面加#号，大概如下：# deb http://mirrors.ustc.edu.cn/debian/ bookworm main non-free-firmware # deb-src http://mirrors.ustc...

1.5w 245 1

更新换源 debian12

解决vite开发时使用vant自动引入组件导致的二次构建

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

解决vite开发时使用vant自动引入组件导致的二次构建

前言当我在vite中使用vant的自动引入组件后，在开发时会经常碰到以下提示：17:33:46 [vite] ✨ new dependencies optimized: vant/es/button/style/index 17:33:46 [vite] ✨ optimized dependencies changed. reloading 然后页面就会刷新，特别难受，去了解了一下为什么会这样？为了防止在启动时占用大量编译时间，vit...

6331 189 1

vant vite 自动加载

利用css实现SPA首屏骨架屏

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

利用css实现SPA首屏骨架屏

前言最近新学到一招，利用原生css实现首屏骨架，这样即可以省去在Home.vue组件中单独创建骨架，而且对html结构是0添加。先看看预览图：效果还是可以的。教程原理就是利用background-image的多重渐变实现骨架占位，配合background-size和background-position进行精准定位，如果你的骨架是大量重复内容，还可以配置background-repeat: repeat-y;进行y轴重复渲染，效果更佳。然后通过动画控制整体的透明度变化实现动效。再通过:empty伪类实现对#app是否渲染的判断。:empty会在对应的元素内部没有任何内容时生效。不多说，直...

2429 1 0

css 骨架屏 spa

vite+vue3多页面（多入口）教程

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

vite+vue3多页面（多入口）教程

前言多页面其实可以理解为多个独立的业务之间共享部分代码逻辑的实现。业务之间是相对独立的，只是小部分或者大部分的代码是可以共用的，常见的一个场景就是：改头换面形式的换肤。不同的皮肤之间毫无可复用组件代码的情况下，我们只能将通用的业务逻辑抽离成可复用的部分，简单点来说就是将数据与ui分离，数据是共用部分，ui是各自独立。最终衍生出的多页面结构大体如下：pages ├── pageA │ ├── App.vue │ ├── index.html │ ├── main.ts └── pageB ├── App.vue ├── index.html └── ma...

1.4w 26 33

vue3 多页面 vite

css 全局关键字属性

木灵鱼儿 2年前 CSS

css 全局关键字属性

inherit 继承关键字这是一个从IE8就开始支持的关键词，用于继承上层的样式效果，比如字体大小，字体颜色等，也是用的比较多的一个关键词，这里就不多说。initial 初始值关键词initial可以把css的属性还原成css语法中规定的初始值，但是需要注意的是这里的初始的值不是元素默认的值，而是css语法规范中定义的初始值。p { display: initial; }p元素默认是block盒子，但是当我们使用initial时你会发现它变成了一个inline盒子了，所以不要搞混了这个关键词的作用。unset 不固定值关键词如果当前使用的css属性是具有继承特性的，unset就等同于...

2223 2 0

css 全局关键字 inherit

利用索引访问类型完整预览出交叉类型定义的属性

木灵鱼儿 2年前 TypeScript

利用索引访问类型完整预览出交叉类型定义的属性

前言在越来越深入使用ts的时候，我们会遇到这种痛点，有人声明了一个类型A，然后另一个人声明了B类型，此时我需要将A、B类型交叉起来，再增加一些新属性，这很好，但是当我们将鼠标移动到定义的新类型C上面的时候，你会发现你只能看到自己新增的属性，A、B类型只能看到一个名字，你无法感知到它们具体都有哪些属性。当然，这在开发中并不会有多大的影响，大不了跳转查看就是了，但是我们能不能不跳转进行预览呢？于是晚上刷小破站看到国外的一个大神的视频，讲述了一个有趣的分享，他分享了一个自定义的Prettify类型，通过使用这个类型我们就能查看到完整的属性了。不多说，上教程。教程interface Test ...

2300 12 0

TypeScript 索引访问类型预览类型

宝塔Nginx配置br和gzip的处理方式

木灵鱼儿 2年前运维

宝塔Nginx配置br和gzip的处理方式

前言由于最近研究了下br和gzip的配置，个人对于这个压缩处理推荐的逻辑是这样的：当访问的资源本地存在br文件的时候，优先使用br，br不存在的时候，访问gz文件，如果gz还不存在，就走默认资源处理或者返回源文件那么这套该怎么配置呢？教程全局nginx配置：gzip on; gzip_static on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript applica...

3123 0 0

压缩 br nginx

宝塔Nginx安装brotli模块增加br压缩支持

木灵鱼儿 2年前运维

宝塔Nginx安装brotli模块增加br压缩支持

前言网上充斥着各种cv的教程，看的我真的要吐了，在国内环境下，根本没法正确编译brotli，为此我自己写一篇完全可用的教程。首先说一下流程：我们需要先卸载nginx，然后通过安装宝塔的服务器，用git拉取一个ngx_brotli项目，然后进入该项目，调用git submodule update --init，当内容返回checkout的时候才算扩展拉取成功。但是大部分人都会卡在这里，因为国情的原因，我们没法正确的拉取到项目。当我们拉取完毕后在宝塔点击安装nginx，选择编译安装，将刚刚拉取的模块加载进来一起编译安装。然后就等待安装完成即可。解决ngx_brotli拉取问题[hide]首先...

5219 1 4

压缩 nginx 宝塔

vite插件：处理不同平台但共用同一个window下的全局变量sdk方案

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

vite插件：处理不同平台但共用同一个window下的全局变量sdk方案

前言最近遇到这么一个头疼的需求，第三方提供了两份sdk，一个是针对安卓端使用的，一个是针对ios端使用的，但是他们都会在全局window上挂载同名属性对象，这就让我很难受了。<script src="/sdk/sdk.min.js"></script> <script src="/sdk/ios_sdk.min.js"></script>前端如果想要使用这个sdk就必须在head引入它，但是它又有两个脚本，后来的脚本又会覆盖上一个脚本在全局挂载的对象。理论上一个优秀的sdk不应该出现这种问题，它应该自...

2822 0 0

插件 vite sdk

vite多页面实现一个html文件压缩插件

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

vite多页面实现一个html文件压缩插件

前言通过vite官方的多页面打包示例，我发现它不会将html文件进行压缩处理，使用了一些第三方插件处理多页面，也都无法对html文件进行压缩处理，于是只能自己想办法了。效果图教程[hide]依赖安装pnpm i posthtml htmlnano cssnano terser svgo -D其中主力是posthtml和htmlnano，其它依赖都是他们的子依赖。编写插件创建文件：vite-plugin-html.tsimport type { Plugin } from "vite"; import posthtml from "posthtml"...

3831 0 1

插件压缩 html

Proxmox VE（PVE）共享磁盘给windows之SMB挂载

木灵鱼儿 2年前运维

Proxmox VE（PVE）共享磁盘给windows之SMB挂载

前言用了1天发现NFS的共享对windows来说真的是噩梦，权限问题太多了，最后在共享的磁盘中处理git仓库操作，各种问题，最后选择放弃，还是使用windows更加友好的SMB共享。对于linux之间的磁盘共享，通过NFS可以提供性能，对于windows的共享，还是得SMB。教程pve通过ssh连接，安装依赖：[hide]apt-get install samba samba-client理论上将pve自己是smb提供方，应该是不需要安装samba-client客户端的，但是由于又要在数据中心挂载目录，所以还是装一下吧。安装完成后我们配置一下smb配置。首先我们的共享目录就以上次挂载的磁...

1.8w 0 34

windows SMB PVE

Proxmox VE（PVE）共享磁盘给虚拟机之NFS挂载

木灵鱼儿 2年前运维

Proxmox VE（PVE）共享磁盘给虚拟机之NFS挂载

上一章我们挂载了一个磁盘，但是这个磁盘如果要给其他虚拟机使用，粗暴的方式就是给其他虚拟机直接在硬件那添加一个磁盘，但是这种方式并不是共享，而是占用指定的空间，显然这并不方便。于是我选择了NFS的方式进行共享，这样linux系统可以使用，windows系统也可以使用。[hide]pve安装NFS通过ssh连接pve。apt-get update apt-get install nfs-kernel-server上一篇我们挂载的磁盘创建的目录是mnt/sda1，我们继续使用它。nano /etc/exports添加一行：/mnt/sda1 *(rw,sync,no_root_squash)...

3.5w 0 58

windows 虚拟机 PVE

Proxmox VE（PVE）挂载硬盘（磁盘）

木灵鱼儿 2年前运维

Proxmox VE（PVE）挂载硬盘（磁盘）

擦除磁盘对于新的硬盘来说，其实没啥必要擦除，但是如果你是一个已经格式化过的硬盘，你希望重新开始，或者说你的磁盘格式不对，可以先用pve的可视化操作快速擦除一下。擦除完我们还需要进行格式化分区并挂载目录。分区格式化[hide]先输入：fdisk /dev/sda 打开指定的分区表并准备操作格式化处理，其中的sda就是上面我们通过pve查看到的新增的磁盘设备，如果你不知道，你可以通过下面这个命令去查看所有磁盘设备：fdisk -l可以看到用我这里已经有两块已经格式化的磁盘分区。其中sda就是本次教程完成后的效果。找到你需要格式化处理的分区输入fdisk 分区路径进入help界面。先输入n再输...

1.4w 0 27

PVE Proxmox 挂载磁盘

Debian12 无法使用sudo提权，提示不是 sudoers 文件

木灵鱼儿 2年前运维

Debian12 无法使用sudo提权，提示不是 sudoers 文件

搞不懂为啥安装最新版的Debian12后就无法像之前那样通过sudo进行提权处理，解决方法如下：先通过普通用户登入，ssh连接或者Debian本地终端也行，输入以下命令：su -此时我们输入root账号的密码就不会提示不是 sudoers 文件了，但是这并不能解决问题，我们继续：visudo此时会打开一个文件，我们往下翻找到root ALL=(ALL:ALL) ALL 这行字符，在它的下一行我们输入一行文本：你当前用于提权的账号 ALL=(ALL:ALL) ALL如果你当前用于提权的账号是aaaa，那么实际文本内容就是：aaaa ALL=(ALL:ALL) ALL输入完毕后CTRL...

1.5w 0 4

debian sudo sudoers

Typecho掘金编辑器《Typecho_Plugin_JJEditor》

木灵鱼儿 2年前 Typecho 主题

Typecho掘金编辑器《Typecho_Plugin_JJEditor》

前言逛掘金的时候发现官方把自己的编辑器开源出来了，于是抽空整了个typecho插件，把官方默认的编辑器换掉，并且和之前写的掘金主题一起联动，文章主题的切换可以即时的预览到，还是挺好的。可惜就是在编辑器中无法预览在markdown中插入的原生html标签，等找到合适的解决方案再修复吧！Github：Typecho_Plugin_JJEditor预览图

8570 2 16

插件编辑器 typecho

木灵鱼儿

git 将本地git仓库关联到远程仓库

约束项目中的包管理为指定包管理器

git 将a分支的内容强制替换b分支，使其完全相同

vite+vue3 代替require()的hooks

简单的对接web版谷歌登录

修复pinia使用setup语法导致$reset报错

ts封装websocket，支持失败重连、心跳、事件订阅

ts中any、unknown、never类型的使用

ts中大小写类型的区别

pinia 5 大顶级技巧解析

Debian12 换源（更新依赖）

解决vite开发时使用vant自动引入组件导致的二次构建

利用css实现SPA首屏骨架屏

vite+vue3多页面（多入口）教程

css 全局关键字属性

利用索引访问类型完整预览出交叉类型定义的属性

宝塔Nginx配置br和gzip的处理方式

宝塔Nginx安装brotli模块增加br压缩支持

vite插件：处理不同平台但共用同一个window下的全局变量sdk方案

vite多页面实现一个html文件压缩插件

Proxmox VE（PVE）共享磁盘给windows之SMB挂载

Proxmox VE（PVE）共享磁盘给虚拟机之NFS挂载

Proxmox VE（PVE）挂载硬盘（磁盘）

Debian12 无法使用sudo提权，提示不是 sudoers 文件

Typecho掘金编辑器《Typecho_Plugin_JJEditor》

最近评论

博客文章RSS订阅

博客评论RSS订阅