木灵鱼儿

木灵鱼儿 2年前 Git 笔记

git 远程分支删除了本地进行同步

前言其实也没有真正意义上的同步，当我们在远程仓库删除了某个分支，通过git命令只能将本地origin/xxx的分支删除，实际上本地还有对应的分支没有被删除。为此我们还需要手动删除本地对应的分支。教程git remote update origin --prune这个命令是git fetch和git remote prune的组合操作。它会更新所有远程分支，并删除本地已经不存在于远程仓库的分支。此时我们查看本地分支，假设你删除的是test分支，你会发现本地对应的origin/test确实没有了，但是还存在一个test分支。这个没办法只能手动删除了。git branch -d test然后就行了。

3327 0 0

git 分支

vite中typescript+eslint+prettier一份官方预设配置

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

vite中typescript+eslint+prettier一份官方预设配置

依赖{ "scripts": { "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" }, "devDependencies": { "...

3878 51 0

vue eslint TypeScript

vscode 灵活使用TODO Highlight插件

木灵鱼儿 2年前教程

vscode 灵活使用TODO Highlight插件

前言随着日常代码的产出，有些时候我们希望代码的注释能够区分一下优先级和类型，比如我发现了一个问题，但是这个问题可能需要以后有时间再修复，又或许为了实现某个功能，我使用了hack的方式，我希望能够给后来者一个提醒，方便接手人的维护，基于这些需求，我找到了一个插件：TODO Highlight它可以很方便的实现注释上的高亮处理，因为我暂时还不需要去大量查询todo，所以就没安装TODO Tree这个插件。实现看下效果图：由于官方默认只预设了TODO:和FIXME:，其他是我自己拓展的，大家可以按照下面的教程配置一下。自定义扩展TODOvscode -> 文件 -> 首选项 -&g...

6234 43 0

vscode todo

vite中多环境变量务必了解的知识

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

vite中多环境变量务必了解的知识

vite中环境变量获取方式vite在处理环境变量时和之前webpack并不一样，它只会将环境变量文件中VITE_为前缀的变量加载到import.meta.env对象上去，而且并不支持动态key的形式：import.meta.env[key] //无效的因为import.meta.env.xxx打包时会被替换成字符串，比如有这么一个环境变量：VITE_NAME="aaa"；const name = import.meta.env.VITE_NAME; //打包后 const name = "aaa";所以如果你是一个动态的key，那就没法进行正确...

5040 32 0

环境变量 env vite

vue3 自定义移动端拖拽指令（支持吸边和offset间距以及回调）

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

vue3 自定义移动端拖拽指令（支持吸边和offset间距以及回调）

前言移动端开发的时候，总是会遇到编写全局浮动组件的情况，比如客服图标啦，消息通知啦，但是浮动就会产生一个问题：阻挡了下层内容展示，常见的做法就是让这个浮动的内容支持拖拽功能，用户将浮动组件拖拽到其他位置即可。这里我参考了vConsole组件，自己根据实际情况编写了一个拖拽指令。代码指令文件：drag.tsimport type { Directive } from "vue"; /** 指令接收的参数 */ interface BindingValue { /** 出现位置的偏移量 [x,y] */ offset?: [number, number]...

3339 188 0

拖拽自定义指令 vue3

vue3中正确设置ref获取的组件ts类型

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

vue3中正确设置ref获取的组件ts类型

在日常开发中，肯定会遇到需要使用ref来获取组件实例的情况：<template> <div class="test"> <MyDialog ref="MyDialogRef"/> </div> </template> <script setup lang="ts"> import MyDialog from "./MyDialog.vue"; const MyDialogRef = ref(); </script...

1.2w 48 12

vue ref 组件类型

JavaScript模块化

木灵鱼儿 2年前 JavaScript

JavaScript模块化

随着JavaScript的代码复杂度日益增加，为了减少开发和维护的难度，模块化的需求出现了，从1999年至今，模块化的发展走过了一些重要的阶段，本篇重点讲解这些比较突出的模块化方式。命名空间早期一个比较简单的模块化方式就是通过命名空间，通过约定俗成的全局变量的方式，将一些属性或者方法存放在一个大写的变量对象中，然后去使用。var MY_MODULE = { name: "a", fn1: function() {}, fn2: function() {} }这样一来可以减少全局作用域上的变量数量，但是这个实现的本身它还是一个对象，这个就导致它的...

6625 39 2

cmd 模块 javascript

vite编写一个内联js的插件vite-plugin-inline-js

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

vite编写一个内联js的插件vite-plugin-inline-js

前言最近有一个想法，就是在使用rem适配大小的时候，往往我们会引入一个用于设置根元素大小的js脚本文件，但是对于这个脚本的处理根据不同情况会有不同的调用方式。以插件：amfe-flexible为例：比如我们是一个纯spa项目，一般就会在main.ts中import引入这个脚本：import "amfe-flexible";一般来说，这种做法没什么问题，因为spa的html渲染是js操作的，我们在渲染之前就引入了这个脚本，所以体验上会先通过amfe-flexible设置根元素大小，再进行html渲染，用户体验良好。随着业务的变化，我们可能会有SSR的需求，首屏loadi...

2674 117 0

vite plugin vite插件

正确引入ts的类型

木灵鱼儿 2年前 TypeScript

正确引入ts的类型

引入ts类型在我们刚开始学习ts的时候，常常是会创建一个types.ts文件，然后在里面声明一个类型并导出：export interface User { name: string; age: number; }使用的时候通过import导入：import { User } from "./types"; const user:User = { name: "a", age: 18 };很高兴你已经学会了如何引入ts类型，教程结束！当然，这是骗你的，但是这种用法确实是最开始ts所提供的，你不能说它错了，我们需要思考一下ts是如何被...

3931 4 0

type 类型 TypeScript

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

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

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

最近碰到一个巨奇葩的问题，项目中采用了unplugin-vue-components，但是vant的组件引入又是import手动按需引入，加上一些很奇怪的配置，导致项目配置变得复杂了，于是抽空将项目的配置全部梳理了一遍，并将import手动按需去除，全部采用自动引入的方式，通过分析打包后的包体，可以看到减少了100kb左右的大小，效果非常可观。但是问题也出在这了，当我使用自动引入的时候，vant的Dialog组件出现了问题，表现为：当我通过组件的形式使用时，弹窗会自动打开，显示还有问题，但是查看v-model:show变量是false；我开始以为是样式问题，单独引入dialog样式无效，...

2755 129 0

vant 自动引入 dialog

quill 富文本编辑器实现自定义工具栏按钮并实现置入html代码

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

quill 富文本编辑器实现自定义工具栏按钮并实现置入html代码

前言实现一个自定义的置入按钮，然后实现置入html代码的功能，比如我们在使用外部iframe标签时，如果直接粘贴，会被识别为string值，从而导致无法正确展示内容，所以我们需要一个置入功能。我一开始想通过控制options的方式来实现，发现不太行，最后转用：先声明html结构，然后options关联的方式。教程自定义工具栏目前个人觉得最方便的方式就是先写html结构，然后options中通过container进行关联。<div id="quill-edit-toolbar" class="ql-toolbar ql-snow"> ...

3969 126 0

vue quill 富文本编辑器

quill 富文本编辑器自定义视频上传（修改默认按钮行为）

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

quill 富文本编辑器自定义视频上传（修改默认按钮行为）

前言上一篇是修改官方的图片上传行为，这次是修改官方视频按钮默认行为，你会发现官方的视频默认行为，总是采用iframe的形式，如果我们希望是原生video元素，就没办法了，于是就有了本篇教程。这次自定义和图片就略有不同了，我们不能直接这么插入：editor.insertEmbed(range.index, 'video', src, Quill.sources.USER);如果采用这种方式，会导致和官方的行为一致，变成插入的是iframe元素了。为此，我们需要了解一个新知识：Blot官方文档对于Blot的介绍很少，我们可以理解是一种行为扩展的方式，可以对用户输入的内容进...

3604 120 0

vue quill 富文本编辑器

vscode 项目开发重构小技巧-back文件

木灵鱼儿 2年前教程

vscode 项目开发重构小技巧-back文件

前言当我们接手了一些二手项目之后，在后期的需求改动时，肯定会遇到大改的情况，可能之前的整个文件我们都不能要了，但是，从开发安全的角度来讲，之前的代码对我们而言是有用的，比如出了问题，我们需要还原成旧的，或者逻辑发现问题，需要和旧的逻辑进行比对排查。在linux的操作中，会有一个很棒的行为习惯，当我们去改动一个很重要的文件时，会先创建一份.back文件，然后再去改动，如果出现问题，可以用back文件进行还原。那么这种行为我觉得可以用在前端项目开发中，这样当新代码出现问题，可以查看旧的代码进行比对，出现问题也能及时还原。当然这种方式从整体来说，对代码的要求是很高的，需要满足里氏替换原则才能实...

2872 20 0

vscode 重构 back

quill 富文本编辑器自定义图片上传（修改默认按钮行为）

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

quill 富文本编辑器自定义图片上传（修改默认按钮行为）

前言quill默认图片上传是将图片转为base64字符串，这个主意很不错，但是如果考虑后端存储的大小，就不太美丽了，因为base64的字符串大小往往比实际图片大小占用还要大一些，所以一般的做法是自定义文件上传，后端返回外链地址，用链地址来代替base64，以减少富文本的内容大小。我目前的做法是将官方默认图片上传的行为改变，这样按钮样式啥的就不用自己操心了。教程修改默认按钮行为我们在初始化quill实例的时候，会传入一个options来控制样式和顶部菜单功能。import type { QuillOptionsStatic } from 'quill'; const ...

1.1w 103 12

vue quill 图片上传

箭头函数

木灵鱼儿 2年前你不知道的JavaScript

箭头函数

简洁性箭头函数在初步了解阶段，你可以发现大部分都是在说箭头函数的简洁性，说它是一个更短的函数。var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ]; elements.map(function(element) { return element.length; }); elements.map(element => element.length);确实，在代码书写上使用它使得代码更加简洁明了，但是它并不是万...

3616 0 2

this 作用域词法

git 删除本地分支和远程分支

木灵鱼儿 2年前 Git 笔记

git 删除本地分支和远程分支

前言最近在调整仓库的分支管理，删除一些旧的代码分支，我本来是想着直接vscode的可视化删除就完事了，结果发现它只能删除本地分支，无法删除远程分支。删除分支的步骤一般分为两步：先删除本地分支再删除远程分支也就是说你需要输入两条命令来解决这个事情。教程删除本地分支git branch -d 分支名需要注意的是，-d是一种安全的删除方式，如果被删除的分支没有被合并到其他分支，就会抛出一个错误，如果我们明确知道这个分支是不需要的，只需要将-d替换成-D，大写的即可。完事后再删除远程分支git push origin --delete 分支名删除远程分支需要注意自己账号是否存在删除的权限，以及对...

3211 0 0

git 分支

vscode Remote - SSH 免密连接

木灵鱼儿 2年前教程

vscode Remote - SSH 免密连接

具体的使用我这就不重复赘述了，我只说下如何实现免密。首先我们需要创建ssh的认证密匙，windows输入命令：ssh-keygen -t rsa不断回车，它会在当前C盘的用户目录里面创建两个文件：id_rsaid_rsa.pub具体生成文件的目录在命令交互中会有提示，所以我这就不贴出来了。两个文件中有一个后缀.pub的文件，我们打开它，可以看到里面会有一串ssh-rsa xxxx的字符串。接着我们回到ssh连接，使用NxShell连接linux服务器，比如我 Remote - SSH配置连接的时候我用的是root用户，那么NxShell连接的时候也要用这个账号。这里要说下，root账号我...

6693 56 1

ssh vscode 远程vscode

Debian12 安装git并初始化

木灵鱼儿 2年前运维

Debian12 安装git并初始化

sudo apt install git安装完毕后输入：git -v查看版本号，如果有版本号内容返回，说明安装成功！然后初始化：git config --global user.name "你的名字" git config --global user.email "你的邮箱地址"至此基本完成，git的安装是方便后续vscode远程管理。

3886 4 0

git debian

Debian12 查看运行占用

木灵鱼儿 2年前运维

Debian12 查看运行占用

再使用vscode远程管理的时候，有一会突然cpu占用暴增，但是不清楚是哪个程序导致的，于是了解了下如何去查看占用。一般情况下大部分的教程都是推荐使用top命令，但是这个实在是太丑了，不太好分辨。于是我们可以使用增强版htopsudo apt install htop安装完成后我们运行命令：htop可以得到一个不错的界面展示。Mem 条目显示了总内存，已用内存，空闲内存和 buffer/cache 的内存。Swap 条目显示了交换空间的总量，已使用的交换空间和空闲的交换空间。%MEM 显示了该进程使用的物理内存占总内存的百分比。RES 或 RSS 显示了该进程现在正在占用的物理内存量（单...

3807 16 1

debian 占用 top

Debian12 添加samba磁盘共享

木灵鱼儿 2年前运维

Debian12 添加samba磁盘共享

前言以前我利用linux虚拟机的时候，文件的共享都是通过samba实现的，在windows中通过映射网络驱动器的方式，将linux中文件当做磁盘文件一样来进行管理。but，我这么做是为了通过vscode打开项目能方便一些，但是这次失算了，因为我的主题项目里面用到了@commitlint/cli来对git提交进行管理，但是这个依赖使用的是cmd.exe命令，这就导致我挂载的网络硬盘不兼容了，cmd不支持UNC路径，运行命令时直接就报错了。如果你也是像我这种，可以改用远程vscode的方式来管理项目代码，当然这种方式对虚拟机的配置要求较高，测试n5105在大部分项目中，都是可以应对的，如果是...

1.2w 0 16

防火墙 samba debian

Proxmox VE（PVE）配置WOL网络唤醒

木灵鱼儿 2年前运维

Proxmox VE（PVE）配置WOL网络唤醒

bios设置这个由于不同的bios设置不同，我这里就只是拿我自己的举例子，在bios中找到：NetWork Wake on LAN Enable，设置成Enabled。这里就各自去看自己的主板型号百度搜对应配置。pve设置wol[hide]先ssh连接到pve，我们需要安装一个插件来查看网口相关信息：apt-get install ethtool安装完成后查看下使用的网口是哪个：ip addr show可以看到我这有4个网口信息，enp2s0这种名字的，然后有对应的mac地址，我们可以去路由器查看当前联网的pve mac地址是什么来确定使用的是哪个网口，因为我这是DHCP模式，所以不好区...

3.8w 0 62

PVE Proxmox wol

Debian12 允许ssh使用root账号连接

木灵鱼儿 2年前运维

Debian12 允许ssh使用root账号连接

NxShell连接debian的时候，由于debian默认要求你只能使用非root账号连接，导致我在sudo提权之后，sftp还是普通用户权限，有些文件修改和上传不方便了，于是想着让他允许使用root连接。我们先使用普通用户连接到debian主机。输入：sudo -i先提权，再输入：nano /etc/ssh/sshd_config找到#PermitRootLogin prohibit-password将它的注释解开，或者再后面再写一行，解开的话这个文本得改，我建议是再写一行，内容如下：PermitRootLogin yes然后CTRL + O保存，CTRL + X退出编辑。重启下ssh...

1.2w 0 4

ssh debian root

Debian12 宝塔安装Alist网盘

木灵鱼儿 2年前运维

Debian12 宝塔安装Alist网盘

手动安装Alist手动安装相对来说好控制一些，先宝塔创建一个纯静态的html站点，比如：www.alist.com，创建完毕后我们先去下载Alist代码。github：Alist找到右侧Releases，点击进入详情页，找到最新版，然后下载alist-linux-amd64.tar.gz这个版本的文件，因为amd64表示linux x86/x64。下载完毕后我们将这个文件上传到刚创建的www.alist.com目录下，解压文件到当前目录，得到一个alist文件，没错，只有一个文件。ssh连接到debian，sudo -i 提权，然后访问到www.alist.com目录：cd /www/w...

4829 0 4

宝塔 alist debian

Debian12 安装最新版node

木灵鱼儿 2年前运维

Debian12 安装最新版node

[hide]在安装前最好sudo提权一下。直接原生安装：apt install nodejs npm -y安装完毕后你输入node -v 发现不是最新版的node，我们使用插件gnpm i n -g全局安装一个n插件n lts表示安装最新的稳定版！一些常用命令n ls查看已安装的node版本n rm 16.0.3删除16.0.3版本更多功能阅读插件文档：n等待安装完毕后，此时其实版本已经安装好了，但是输入node -v还是低版本，是因为用户缓存问题。我们退出登录再登录就会刷新缓存了，此时的node -v输出的就是最新版本exit 退出登录[/hide]

1.3w 0 21

npm node debian

Debian12 安装sudo权限

木灵鱼儿 2年前运维

Debian12 安装sudo权限

前言Debian12最近发了正式版，刚好小主机装了pve，这不得拿来体验一下，安装完debian后，发现默认没有sudo提权，于是只能自己手动造了。教程登录root账号，安装依赖：apt-get install sudo安装完毕后我们还需要配置文件，输入命令：visudo进入到编辑状态，找到root的地址，再下面新增一个你允许提权的账号，debian在安装的时候会让你创建一个用户账号，比如我的账号是：ABC设置如下：ABC ALL=(ALL:ALL) ALL改好后 CTRL + O保存文件，CTRL + X退出编辑模式。此时我们通过ABC ssh连接服务器，输入命令：sudo -i，然...

5308 0 0

debian sudo

木灵鱼儿

git 远程分支删除了本地进行同步

vite中typescript+eslint+prettier一份官方预设配置

vscode 灵活使用TODO Highlight插件

vite中多环境变量务必了解的知识

vue3 自定义移动端拖拽指令（支持吸边和offset间距以及回调）

vue3中正确设置ref获取的组件ts类型

JavaScript模块化

vite编写一个内联js的插件vite-plugin-inline-js

正确引入ts的类型

vant中Dialog与自动引入插件unplugin-vue-components冲突的问题

quill 富文本编辑器实现自定义工具栏按钮并实现置入html代码

quill 富文本编辑器自定义视频上传（修改默认按钮行为）

vscode 项目开发重构小技巧-back文件

quill 富文本编辑器自定义图片上传（修改默认按钮行为）

箭头函数

git 删除本地分支和远程分支

vscode Remote - SSH 免密连接

Debian12 安装git并初始化

Debian12 查看运行占用

Debian12 添加samba磁盘共享

Proxmox VE（PVE）配置WOL网络唤醒

Debian12 允许ssh使用root账号连接

Debian12 宝塔安装Alist网盘

Debian12 安装最新版node

Debian12 安装sudo权限

最近评论

博客文章RSS订阅

博客评论RSS订阅