广告
广告
广告
引入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是如何被...
最近碰到一个巨奇葩的问题,项目中采用了unplugin-vue-components,但是vant的组件引入又是import手动按需引入,加上一些很奇怪的配置,导致项目配置变得复杂了,于是抽空将项目的配置全部梳理了一遍,并将import手动按需去除,全部采用自动引入的方式,通过分析打包后的包体,可以看到减少了100kb左右的大小,效果非常可观。但是问题也出在这了,当我使用自动引入的时候,vant的Dialog组件出现了问题,表现为:当我通过组件的形式使用时,弹窗会自动打开,显示还有问题,但是查看v-model:show变量是false;我开始以为是样式问题,单独引入dialog样式无效,...
前言实现一个自定义的置入按钮,然后实现置入html代码的功能,比如我们在使用外部iframe标签时,如果直接粘贴,会被识别为string值,从而导致无法正确展示内容,所以我们需要一个置入功能。我一开始想通过控制options的方式来实现,发现不太行,最后转用:先声明html结构,然后options关联的方式。教程自定义工具栏目前个人觉得最方便的方式就是先写html结构,然后options中通过container进行关联。<div id="quill-edit-toolbar" class="ql-toolbar ql-snow"> ...
前言上一篇是修改官方的图片上传行为,这次是修改官方视频按钮默认行为,你会发现官方的视频默认行为,总是采用iframe的形式,如果我们希望是原生video元素,就没办法了,于是就有了本篇教程。这次自定义和图片就略有不同了,我们不能直接这么插入:editor.insertEmbed(range.index, 'video', src, Quill.sources.USER);如果采用这种方式,会导致和官方的行为一致,变成插入的是iframe元素了。为此,我们需要了解一个新知识:Blot官方文档对于Blot的介绍很少,我们可以理解是一种行为扩展的方式,可以对用户输入的内容进...
前言当我们接手了一些二手项目之后,在后期的需求改动时,肯定会遇到大改的情况,可能之前的整个文件我们都不能要了,但是,从开发安全的角度来讲,之前的代码对我们而言是有用的,比如出了问题,我们需要还原成旧的,或者逻辑发现问题,需要和旧的逻辑进行比对排查。在linux的操作中,会有一个很棒的行为习惯,当我们去改动一个很重要的文件时,会先创建一份.back文件,然后再去改动,如果出现问题,可以用back文件进行还原。那么这种行为我觉得可以用在前端项目开发中,这样当新代码出现问题,可以查看旧的代码进行比对,出现问题也能及时还原。当然这种方式从整体来说,对代码的要求是很高的,需要满足里氏替换原则才能实...
前言quill默认图片上传是将图片转为base64字符串,这个主意很不错,但是如果考虑后端存储的大小,就不太美丽了,因为base64的字符串大小往往比实际图片大小占用还要大一些,所以一般的做法是自定义文件上传,后端返回外链地址,用链地址来代替base64,以减少富文本的内容大小。我目前的做法是将官方默认图片上传的行为改变,这样按钮样式啥的就不用自己操心了。教程修改默认按钮行为我们在初始化quill实例的时候,会传入一个options来控制样式和顶部菜单功能。import type { QuillOptionsStatic } from 'quill'; const ...
前言最近在调整仓库的分支管理,删除一些旧的代码分支,我本来是想着直接vscode的可视化删除就完事了,结果发现它只能删除本地分支,无法删除远程分支。删除分支的步骤一般分为两步:先删除本地分支再删除远程分支也就是说你需要输入两条命令来解决这个事情。教程删除本地分支git branch -d 分支名需要注意的是,-d是一种安全的删除方式,如果被删除的分支没有被合并到其他分支,就会抛出一个错误,如果我们明确知道这个分支是不需要的,只需要将-d替换成-D,大写的即可。完事后再删除远程分支git push origin --delete 分支名删除远程分支需要注意自己账号是否存在删除的权限,以及对...
具体的使用我这就不重复赘述了,我只说下如何实现免密。首先我们需要创建ssh的认证密匙,windows输入命令:ssh-keygen -t rsa不断回车,它会在当前C盘的用户目录里面创建两个文件:id_rsaid_rsa.pub具体生成文件的目录在命令交互中会有提示,所以我这就不贴出来了。两个文件中有一个后缀.pub的文件,我们打开它,可以看到里面会有一串ssh-rsa xxxx的字符串。接着我们回到ssh连接,使用NxShell连接linux服务器,比如我 Remote - SSH配置连接的时候我用的是root用户,那么NxShell连接的时候也要用这个账号。这里要说下,root账号我...
再使用vscode远程管理的时候,有一会突然cpu占用暴增,但是不清楚是哪个程序导致的,于是了解了下如何去查看占用。一般情况下大部分的教程都是推荐使用top命令,但是这个实在是太丑了,不太好分辨。于是我们可以使用增强版htopsudo apt install htop安装完成后我们运行命令:htop可以得到一个不错的界面展示。Mem 条目显示了总内存,已用内存,空闲内存和 buffer/cache 的内存。Swap 条目显示了交换空间的总量,已使用的交换空间和空闲的交换空间。%MEM 显示了该进程使用的物理内存占总内存的百分比。RES 或 RSS 显示了该进程现在正在占用的物理内存量(单...
前言以前我利用linux虚拟机的时候,文件的共享都是通过samba实现的,在windows中通过映射网络驱动器的方式,将linux中文件当做磁盘文件一样来进行管理。but,我这么做是为了通过vscode打开项目能方便一些,但是这次失算了,因为我的主题项目里面用到了@commitlint/cli来对git提交进行管理,但是这个依赖使用的是cmd.exe命令,这就导致我挂载的网络硬盘不兼容了,cmd不支持UNC路径,运行命令时直接就报错了。如果你也是像我这种,可以改用远程vscode的方式来管理项目代码,当然这种方式对虚拟机的配置要求较高,测试n5105在大部分项目中,都是可以应对的,如果是...
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模式,所以不好区...
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...
手动安装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...
[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]
前言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,然...
下载ISO镜像制作安装U盘官网:proxmox找到download菜单,点击进入,找到ISO Installer关键词,下载ISO镜像文件。可以看到,左边是官方直接下载,右边是bt种子,如果网络不好,用种子配合迅雷下起来会很快。下载完毕后我们还需要一个8g的u盘,当然目前镜像才1g多,所以小一点的u盘也是可以的,利用软碟通UltraISO软件将制作安装U盘。UltraISO:蓝奏云 密码:5b2b解压后打开软件:文件 -> 打开 -> 找到下载的proxmox镜像文件 打开后,插入u盘,再回到软件点击启动菜单 -> 写入硬盘映像 -> 硬盘驱动器选择U盘 -&g...
前言最近同事测试落地页发现下载触发无响应,然后我为了调试方便,给他手机从酷安上下了一个谷歌浏览器,结果安装完才打开,发现页面直接就报错了,提示:vue router SyntaxError: Unexpected token '?'我开始以为是路由出现问题了,结果查了半天发现是es的新特性??语法导致的。由于vite使用的是esbuild打包,所以我在esbuild的文档上查询到,??语法最低只支持Chrome 80版本,我一看安装的版本v78,两眼一黑。看来要做一个低版本的兼容处理了。教程vite的配置选项中有一个build选项,里面有一个target目标,表示你需...
通过官方文档的这个命令安装的pnpm:iwr https://get.pnpm.io/install.ps1 -useb | iex但是最近这种安装安装的pnpm不再提供自我更新的命令了,而且有版本更新时每次安装依赖都会打印一个大大的提示,这就很烦,而且这种方式安装需要连接github,对网络要求比较高。个人现在使用:npm install -g pnpm包管理起来也很方便,卸载就uninstall的事。于是我找了很久,终于写到用上面那种安装改怎么进行卸载:Get-Command pnpm先查找它的安装位置,此时会返回安装的位置。再根据返回的位置使用Remove-Item "C...
前言在面试的时候有跟一些面试者交流到git提交规范上的一些事情,有些人就会提到,他们在提交代码的时候会有一定的提交规范,如果commit提交的信息不符合要求,会被禁止提交,并且严格一点的提交后还会有人专门进行代码审查(Code Review),只有代码符合合并要求才会进行Pull Request合并。由于本人目前已经退居二线,也没想着能进入大厂学习那套规范,但是在一些技术文章中还是能够“管中窥豹”,于是我将自己的主题项目加入了git提交规范并将其记录在本章教程中。首先就是技术选型,我在了解规范时看到有两个比较常见的工具:commitizengitmoji-cli其中gitmoji-cli...
前言最近发现主题的目录树很多地方不是很满意,一方面是自己对于php的知识不是很好,大部分都是从网上分析的代码中拿取cv一下就用了,加上重构主题是一个比较大的工程,所以有些地方都是奔着先跑起来再说的思路。像极了项目开发时的场景,先上线再说,用户量大了我们再优化!昨晚我看了下typecho的目录树,都使用了一个全局变量:global $catalog;$catalog是一个扁平化的数组,里面存放着按顺序提取的页面h1-h6标题数据,由于php的数组可视化巨难看,我们先通过ts的方式去了解和实现这个处理。教程[hide]$catalog的数据结构大致如下:const catalog = [ ...
首先我们需要拿到回退版本的版本号,通过vscode可视化查看或者git log来查找。如果vscode安装了Git History插件,其实是可以通过可视化方式本地回退到指定版本。我们看到它是有两个回退的方式:soft和hard;鼠标点击对应的按钮,就会弹出提示是否需要回退,点击ok回退。如果你想用指令,他们分别对应如下:git reset --soft xxxxxxx版本 git reset --hard xxxxxxx版本他们之间区别是:--soft:回退到指定版本,但是不改变工作区和暂存区的内容,这意味着回退后原来提交的修改还在暂存区,需要手动重新提交。可以使用以下命令回退到指...
前言之前写过一篇关于《处理不同平台的回车处理 warning Delete ␍ prettier prettier# 不同平台的回车处理 warning Delete ␍ prettier prettier》的文章。但是这是讲了如何处理当前文件的尾换行符报错而已,这次分享在项目开发初期如何配置你的尾换行符,以及批处理方式。vscode配置尾换行符现阶段我可能更加推荐使用LF的尾换行方式,在linux和mac中都是使用这种方式,而windows中使用的 CRLF,如果存在不同系统下的开发,LF是最好的选择。而且这种方式也契合我之前分享的Prettier格式化配置。vscode -> ...
最近评论