草稿
Hismart color
#EE781E
Nuxt.js
vue-demi
元素宽度继承
块级元素(如div)的宽度继承自父级或自己单独设置宽度,无法被撑开宽度
只有行内元素(如span)和行内块元素(如a)才可以被撑开宽度
断言表达式
123(?=abc)
后面必须满足表达式abc
123(?!abc)
后面必须不满足表达式abc
(?<=abc)123
前面必须满足表达式abc
(?<!abc)123
前面必须不满足表达式abc
例如:
/123(?!(\n|.)*abc)/
123后面的内容,必定不能满足表达式/(\n|.)*abc/
/(?<=abc).*123/
123前面必须有abc
scss 颜色函数
RGB颜色函数
rgb($red,$green,$blue)
根据红、绿、蓝三个值创建一个颜色;
rgba($red,$green,$blue,$alpha)
根据红、绿、蓝和透明度值创建一个颜色;
red($color)
从一个颜色中获取其中红色值;
green($color)
从一个颜色中获取其中绿色值;
blue($color)
从一个颜色中获取其中蓝色值;
mix($color-1,$color-2,[$weight])
把两种颜色混合在一起。
HSL颜色函数
hsl($hue,$saturation,$lightness)
通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;
hsla($hue,$saturation,$lightness,$alpha)
通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;
hue($color)
从一个颜色中获取色相(hue)值;
saturation($color)
从一个颜色中获取饱和度(saturation)值;
lightness($color)
从一个颜色中获取亮度(lightness)值;
adjust-hue($color,$degrees)
通过改变一个颜色的色相值,创建一个新的颜色;
lighten($color,$amount)
通过改变颜色的亮度值,让颜色变亮,创建一个新的颜色;
darken($color,$amount)
通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
saturate($color,$amount)
通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
desaturate($color,$amount)
通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
grayscale($color)
将一个颜色变成灰色,相当于desaturate($color,100%)
;
complement($color)
返回一个补充色,相当于adjust-hue($color,180deg)
;
invert($color)
反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
Opacity函数
alpha($color) /opacity($color)
获取颜色透明度值;
rgba($color, $alpha)
改变颜色的透明度值;
opacify($color, $amount) / fade-in($color, $amount)
使颜色更不透明;
transparentize($color, $amount) / fade-out($color, $amount)
使颜色更加透明。
其他颜色函数
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
通过调整颜色一个属性或者多个属性获取新的颜色;
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
通过调整颜色的一个属性或者多个属性获取一个流畅颜色;
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
通过调整颜色的一个或者多个属笥获取一个新颜色;
ie-hex-str($color)
将一个颜色转换成适合ie滤镜使用的颜色。
HTTP缓存
https://blog.csdn.net/qq_34115899/article/details/86107217
word
npm audit security report NPM审计安全报告
low
低
moderate
中等(温和的)
high
高
critical
严重(致命的)
vulnerabilities
漏洞
Rollup打包工具
结合vite
export default {
build: {
rollupOptions: {
output: {
manualChunks (id, { getModuleInfo }) {
// id 'E:/workspace/project-name/node_modules/echarts/...js'
const matchArr = id.match(/(?<=\/node_modules\/)([^\/]+)/) || []
// 返回相同的名称将被打包到一起
if (matchArr[0]) return 'module_' + matchArr[0]
}
}
}
}
}
URL 内置构造函数
URL 接口用于解析,构造,规范化和编码 URL。它通过提供允许你轻松阅读和修改 URL 组件的属性来工作。通常,通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。然后,你可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。
原型属性:
hash // 包含'#'的USVString,后跟 URL 的片段标识符。
host // 一个USVString,其中包含域(即主机名),后跟(如果指定了端口)“:”和 URL 的端口。
hostname // 包含 URL 域名的 USVString。
href // 包含完整 URL 的 USVString。
origin // 只读 返回一个包含协议名、域名和端口号的 USVString。
password // 包含在域名前面指定的密码的 USVString 。
pathname // 以 '/' 起头紧跟着 URL 文件路径的 DOMString。
port // 包含 URL 端口号的 USVString。
protocol // 包含 URL 协议名的 USVString,末尾带 ':'。
search // 一个USVString ,指示 URL 的参数字符串;如果提供了任何参数,则此字符串包括所有参数,并以开头的“?”开头 字符。
searchParams // 只读 URLSearchParams对象,可用于访问search中找到的各个查询参数。
username // 包含在域名前面指定的用户名的 USVString。
原型方法:
toString() // 返回包含整个 URL 的USVString。它是URL.href的同义词,尽管它不能用于修改值。
toJSON() // 返回包含整个 URL 的USVString。它返回与href属性相同的字符串。
静态方法:
createObjectURL() // 返回一个DOMString ,包含一个唯一的 blob 链接(该链接协议为以 blob:,后跟唯一标识浏览器中的对象的掩码)。
revokeObjectURL() // 销毁之前使用URL.createObjectURL()方法创建的 URL 实例。
ESLint 和 Prettier
- ESLint仅仅对 ECMAScript/JavaScript 进行检测;Prettier支持多种语言。
- ESLint既能支持代码格式化,也能保证代码质量;Prettier仅仅是对代码进行格式化。
- ESLint更加灵活,支持自定义规则(无限的可能性);Prettier固执,设计之初就希望程序员不过多的关注依赖,所以导致灵活性不高,可配置项少(官网思想:如果觉得不够灵活,就不要用!!!)
ESlint-plugin-vue
预设规则:
=== Vue3 ===
plugin:vue/vue3-essential 重要的
plugin:vue/vue3-strongly-recommended 强烈推荐的
plugin:vue/vue3-recommended 推荐的
=== Vue2 ===
plugin:vue/essential 重要的
plugin:vue/strongly-recommended 强烈推荐的
plugin:vue/recommended 推荐的
github.com 打不开
网站查找dns解析最快的服务器
在C:\Windows\System32\drivers\etc
找到hosts文件
添加一行,如:20.205.243.166 github.com
cmd执行:ipconfig/flushdns
chrome 多版本共存
F5
void
void 运算符,在javascript语法中,表示对给定的表达式进行求值,然后返回 undefined
换句话说,void 意味着执行表达式,但丢弃表达式的返回值
cherry-pick
-e, --edit 编辑提交信息
-n, --no-commit 只更新工作区和暂存区,不产生新的提交
-x, 在提交信息的末尾追加一行(cherry picked from commit ...),方便以后查到这个提交是如何产生的。
-s, --signoff 在提交信息的末尾追加一行操作者的签名,表示是谁进行了这个操作
-m parent-number, --mainline parent-number 如果原始提交是一个合并节点,来自于两个分支的合并,那么 Cherry pick 默认将失败,因为它不知道应该采用哪个分支的代码变动 -m配置项告诉 Git,应该采用哪个分支的变动。它的参数parent-number是一个从1开始的整数,代表原始提交的父分支编号
查找
二分查找
没有重复的话,把索引数组转成关联数组,用下标去找应该能很快。
把id的值当做key映射到一个对象上,然后留可以用obj[id]这种形式访问了
Git stash
git stash
暂存
git stash save "comment"
暂存并添加注释
git stash list
查看暂存列表
git stash apply
应用顶部第一个暂存(不删除该暂存)
git stash apply stash@{<number>}
应用指定顺序的暂存(不删除该暂存)
git stash pop
应用顶部第一个暂存,且删除该暂存(不会清空工作区,意味着删除之后仍保留了暂存的内容在工作区中)
git stash pop stash@{<number>}
应用指定顺序的暂存,且删除该暂存(不会清空工作区)
git stash drop
删除顶部第一个暂存(!警告,它会同时清空工作区,你将失去该暂存)
git stash drop stash@{<number>}
删除指定顺寻的暂存(!警告,它会同时清空工作区,你将失去该暂存)
git commit --amend -m "comment"
修改最后一次的提交信息(注释)
git checkout -b temp origin/temp
git checkout -track(-t) origin/temp
git fetch origin temp
git fetch origin temp:temp
git checkout temp
git fetch
git checkout temp
feat:新功能(feature)
fix:修补bug
optimize: 优化
docs:文档(documentation)
style: 格式(不影响代码运行的变动)
refactor:重构(即不是新增功能,也不是修改bug的代码变动)
test:增加测试
chore:构建过程或辅助工具的变动
终端查找命令
pageUp pageDown 上下翻找
ctrl + r 搜索
history 显示历史命令列表
history | grep doc 在历史命令列表中过滤字符doc
key不生效
如果key不生效,可能的情况之一是:父级给设置的key和本级设置的key冲突了
eslint 无法格式化
可能是eslint运行报错了,检查【输出】栏,查看报错并解决
postcss 找不到配置文件
postcss将从引入的css文件开始向上查找,如果引入其它磁盘的文件,可能会出现这个问题
比nvm更好的选择volta
Nginx
nginx配置之后,如果想要打印配置的变量的的值,或者检查配置是否成功
可以简单的在 location 中 return 200 abc123$new_uri
响应字符串
也可以打印在响应头中 add_header X-debug-message abc123$new_uri always;
location ~* ^/((code|auth|gen|daemon).*) {
set $all_uri http://192.168.8.119:9999/admin/$1;
# return 200 $all_uri;
add_header A-debug-message $all_uri always;
proxy_pass $all_uri;
proxy_connect_timeout 600s;
proxy_send_timeout 600s;
proxy_read_timeout 600s;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
早前的笔记
关于ningx的介绍,下载,安装,控制,配置,在不同的操作系统中
浏览器五种监听的API
IntersectionObserver
一个元素从不可见到可见,从可见到不可见
MutationObserver
监听元素的属性和子节点的变化
ResizeObserver
监听元素的尺寸改变
PerformanceObserver
监听记录 performance 数据的行为
ReportingObserver
监听过时的 api、浏览器干预等报告
String.raw
// 自动帮助转义字符串,返回模板字符串不转义的原始字符串内容
// String.raw`abc \n abc`
// String.raw({ raw: 'abc \n abc' })
new RegExp(String.raw`\/\.${abc}\/$`)
Tabby SFTP 目录跟随
在服务器执行以下命令,授权读取当前目录:
export PS1="$PS1\[\e]1337;CurrentDir="'$(pwd)\a\]'
Git tag
git tag -a "v1.1" -m "第1.1版本"
添加标签和标签描述
git tag -a "v0.9" 9fceb02
给早前的提交添加标签
git show "v1.1"
git tag -d "v1.1"
删除本地标签
git push origin v1.1
推送指定标签
git push origin --tags
推送所有标签
git push :refs/tags/v1.1
删除远程指定标签
git push origin --delete v1.1
删除远程指定标签
git push origin --delete refs/tags/v1.1
删除远程指定标签(假如tag和branch重名,请勿重名)
如果你创建的 tag 名和分支名一样,容易造成混淆,就必须使用索引名全称来区分它们。
比如 refs/tags/v1
、refs/heads/v1
VsCode 没有历史记录的问题
"terminal.integrated.profiles.windows": {
"my-cmd": {
"path": "C:\\Program Files\\Git\\bin\\bash.exe",
"args": ["-l"],
"env": { "PROMPT_COMMAND": "history -a" }
}
}
插件@vitejs/plugin-legacy@5.4.3配置
仅是5.4.3版本配置解释,最新版本注意查看文档
targets
构建目标(除非显式设置,否则回退至默认值) 'last 2 versions and not dead, > 0.3%, Firefox ESR'modernTargets
现代构建目标(除非显式设置,否则回退至默认值) 'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'polyfills
垫片(默认按需,false则不添加(自行处理垫片),或者显式设置要包含的垫片) truemodernPolyfills
现代垫片(默认不添加,true则按需,或者显式设置要包含的垫片) falseadditionalLegacyPolyfills
额外遗留垫片(因为自动检测仅包含es语言功能,所以此处可添加额外的domApi垫片) []additionalModernPolyfills
额外现代垫片(因为自动检测仅包含es语言功能,所以此处可添加额外的domApi垫片) []renderLegacyChunks
是否渲染遗留包 truerenderModernChunks
是否渲染现代包 trueexternalSystemJS
是否排除systemJs false
nginx 启动报错
The system cannot find the path specified
可能的原因:配置了环境变量,nginx 直接从启动目录去查找日志及配置文件,而这个路径不匹配且有误。
解决方式:1. 不使用环境变量;2. 封装一层命令