nvm
下载和查阅如何使用nvm，请访问 GitHub nvm项目
Hismart color
#EE781E
函数
asyncLoad
import Vue from 'vue'
import store from '@/store'
export function asyncLoad (asyncFunc, options) {
asyncFunc().then(mod => {
const TheClass = Vue.extend({
name: 'AsyncContainer',
render (h) {
return h(mod.default, options)
}
})
const theIns = new TheClass({ store })
theIns.$mount()
document.body.appendChild(theIns.$el)
// for el.dialog
try {
const dialog = theIns.$children[0].$children[0]
dialog.$on('closed', () => {
document.body.removeChild(theIns.$el)
theIns.$destroy()
})
} finally {}
})
}
observer
export function observer (target, callback, options) {
const _options = {
root: null, // 根元素，用于检查目标的可见性。必须是目标的父级元素。为null默认为浏览器视窗
rootMargin: '0px', // 控制根元素每一边的伸缩和扩张，默认都是0
threshold: 0, // 0~1的数值或数组（0表示只要有一个元素相交），目标元素与根元素相交的比例阈值，超过阈值触发回调
...options
}
const _callback = evt => {
let isIntersecting = false
if (evt && evt[0]) {
const rawII = evt[0].isIntersecting
isIntersecting = (
rawII === undefined
? (evt[0].intersectionRatio > 0)
: rawII
)
}
callback && callback(evt, isIntersecting)
}
if (!target) return void(0)
const obj = new IntersectionObserver(_callback, _options)
ob.observer(target)
}
downloadFileWithBlob
import { isBlob } from '@/util'
// 通过blob下载文件
export function downloadFileWithBlob (blob, filename) {
return new Promise((resolve, reject) => {
if (!isBlob(blob)) return reject(new Error('Failed Download. It\'s Not a Blob'))
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, filename)
} else {
const a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = filename
document.body.appendChild(a)
a.click()
resolve()
setTimeout(() => {
URL.revokeObjectURL(blob)
document.body.removeChild(a)
}, 0)
}
})
}
getFilenameFromRes
// 通过response headers获取文件名
export function getFilenameFromRes (res) {
const _contentDisposition = res.headers['content-disposition'] || ''
const _filename = (_contentDisposition.match(/;?filename=([^;]*)/) || [])[1] || 'unknown'
const _fileType = res.headers['filetype'] || res.headers['FileType'] || ''
return window.decodeURIComponent(_filename) + _fileType
}
vue2.7
import { useRouter } from "vue-router/composables"
Nuxt.js
vue-demi
元素宽度继承
块级元素（如div）的宽度继承自父级或自己单独设置宽度，无法被撑开宽度
只有行内元素（如span）和行内块元素（如a）才可以被撑开宽度
Transition
-
什么时候过渡：
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点 -
过渡的类名
默认：
v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to
命名（name="fade"）：
fade-enter
fade-enter-active
fade-enter-to
fade-leave
fade-leave-active
fade-leave-to -
自定义类名（当使用第三方库，如Animate.css）
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class -
钩子函数（使用js方式）
@before-enter
@enter
@after-enter
@enter-cancelled
@before-leave
@leave
@after-leave
@leave-cancelled -
初始渲染过渡
appear
appear-class
appear-to-class
appear-active-class
@before-appear
@appear
@after-appear
@appear-cancelled -
过渡模式 （mode="out-in"）
默认情况下，同进同出
in-out：（先进后出）新元素先进行过渡，完成之后当前元素过渡离开。
out-in：（先出后进）当前元素先进行过渡，完成之后新元素过渡进入。
TransitionGroup
断言表达式
/he(?=ll)/.test('hello') // he后面必定有ll
/he(?!=ll)/.test('hello') // he后面必定没有ll
/(?<=he)ll/.test('hello') // ll前面必定有he
/(?<!he)ll/.test('hello') // ll前面必定没有he
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 实例。
Vite @vitejs/[email protected]
现代包：在主流的浏览器中运行的包
旧包：在除了主流浏览器以外，还要支持的旧浏览器中运行的包
polyfill：语法垫片
- targets: 'last 2 versions and not dead, > 0.3%, Firefox ESR'
类型：string | string[] | { [key: string]: string }
解释：设置构建目标列表 - polyfills: true
类型：boolean | string[]
解释：要添加的polyfill，或者启用自动检测 - additionalLegacyPolyfills: []
类型：string[]
解释：额外要添加的polyfill，因为如果启用自动检测会仅涵盖ES语言功能，所以此时需要手动指定额外的polyfill - modernPolyfills: false
类型：boolean | string[]
解释：仅在现代包生效的polyfill，或者自动检测（不建议） - externalSystemJS: false
类型：boolean
解释：启用此项，将在polyfill中排除systemjs/dist/s.min.js - renderModernChunks: true
类型：boolean
解释：是否生成现代包，设置为false，仅生成旧包
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 推荐的
基础：为eslint-plugin-vue提供的所有预设启用此类别中的规则。
vue/comment-directive 支持<template>中的注释指令
vue/jsx-uses-vars 防止JSX中使用的变量被标记为未使用
优先级A：基本（错误预防）
包含在所有预设中
vue/multi-word-component-names 要求组件名称始终为多字
vue/no-arrow-functions-in-watch 禁止使用箭头函数定义 watcher
vue/no-async-in-computed-properties 禁止计算属性中的异步操作
vue/no-child-content 存在v-html和v-text指令时，元素不允许有子内容
vue/no-computed-properties-in-data 不允许访问data中的计算属性
vue/no-custom-modifiers-on-v-model 不允许在v-model上使用自定义修饰符 only-vue2
vue/no-decrecated-data-object 不允许在data上使用已弃用的属性 only-vue3
vue/no-deprecated-destroyed-lifecycle 禁用已弃用的destroyed beforeDestroy only-vue3
vue/no-deprecated-dollar-listeners-api 禁用已弃用的$listeners only-vue3
vue/no-deprecated-dollar-scopedslots-api 禁用已弃用的$scopedSlots only-vue3
vue/no-deprecated-events-api 禁止使用已弃用的事件api only-vue3vue/no-deprecated-filter
vue/no-deprecated-functional-template
vue/no-deprecated-html-element-is
vue/no-deprecated-inline-template
vue/no-deprecated-props-default-this
vue/no-deprecated-router-link-tag-prop
vue/no-deprecated-scope-attribute
vue/no-deprecated-slot-attribute
vue/no-deprecated-slot-scope-attribute
vue/no-deprecated-v-bind-sync
vue/no-deprecated-v-is
vue/no-deprecated-v-on-native-modifier
vue/no-deprecated-v-on-number-modifiers
vue/no-deprecated-vue-config-keycodes
vue/no-dupe-keys
vue/no-dupe-v-else-if
vue/no-duplicate-attributes
vue/no-export-in-script-setup
vue/no-expose-after-await
vue/no-lifecycle-after-await
vue/no-multiple-template-root
vue/no-mutating-props
vue/no-parsing-error
vue/no-ref-as-operand
vue/no-reserved-component-names
vue/no-reserved-keys
vue/no-reserved-props
vue/no-shared-component-data
vue/no-side-effects-in-computed-properties
vue/no-template-key
vue/no-textarea-mustache
vue/no-unused-components
vue/no-unused-vars
vue/no-use-computed-property-like-method
vue/no-use-v-if-with-v-for
vue/no-useless-template-attributes
vue/no-v-for-template-key-on-child
vue/no-v-for-template-key
vue/no-v-model-argument
vue/no-v-text-v-html-on-component
vue/no-watch-after-await
vue/prefer-import-from-vue
vue/require-component-is
vue/require-prop-type-constructor
vue/require-render-return
vue/require-slots-as-functions
vue/require-toggle-inside-transition
vue/require-v-for-key
vue/require-valid-default-prop
vue/return-in-computed-property
vue/return-in-emits-validator
vue/use-v-on-exact
vue/valid-attribute-name
vue/valid-define-emits
vue/valid-define-props
vue/valid-model-definition
vue/valid-next-tick
vue/valid-template-root
vue/valid-v-bind-sync
vue/valid-v-bind
vue/valid-v-cloak
vue/valid-v-else-if
vue/valid-v-else
vue/valid-v-for
vue/valid-v-html
vue/valid-v-if
vue/valid-v-is
vue/valid-v-memo
vue/valid-v-model
vue/valid-v-on
vue/valid-v-once
vue/valid-v-pre
vue/valid-v-show
vue/valid-v-slot
vue/valid-v-text
优先级B：强烈推荐（提高可读性）
包含在强烈推荐和推荐预设中
vue/attribute-hyphenation 在模板中的自定义组件上强制执行属性命名样式
vue/component-definition-name-casing 强制组件定义名称的特定大小写
vue/first-attribute-linebreak 强制第一个属性的位置
vue/html-closing-bracket-newline
vue/html-closing-bracket-spacing
vue/html-end-tags
vue/html-indent
vue/html-quotes
vue/html-self-closing
vue/max-attributes-per-line
vue/multiline-html-element-content-newline
vue/mustache-interpolation-spacing
vue/no-multi-spaces
vue/no-spaces-around-equal-signs-in-attribute
vue/no-template-shadow
vue/one-component-per-file
vue/prop-name-casing
vue/require-default-prop
vue/require-explicit-emits
vue/require-prop-types
vue/singleline-html-element-content-newline
vue/v-bind-style
vue/v-on-event-hyphenation
vue/v-on-style
vue/v-slot-style
优先级C：推荐（潜在危险模式）
包含在推荐预设中
vue/attributes-order
vue/component-tags-order
vue/no-lone-template
vue/no-multiple-slot-args
vue/no-v-html
vue/order-in-components
vue/this-in-template
未分类的
没有预设包含此中规则，如果需要可自行添加
vue/block-lang 禁止使用可用语言以外的其他语言
vue/block-order 强制组件顶级元素的顺序
vue/block-tag-newline 在打开和关闭块级标记之前强制换行符
vue/component-api-style
vue/component-name-in-template-casing
vue/component-options-name-casing
vue/custom-event-name-casing
vue/define-emits-declaration
vue/define-macros-order
vue/define-props-declaration
vue/html-button-has-type
vue/html-comment-content-newline
vue/html-comment-content-spacing
vue/html-comment-indent
vue/match-component-file-name
vue/match-component-import-name
vue/max-lines-per-block
vue/new-line-between-multi-line-property
vue/next-tick-style
vue/no-bare-strings-in-template
vue/no-boolean-default
vue/no-deprecated-model-definition
vue/no-duplicate-attr-inheritance
vue/no-empty-component-block
vue/no-multiple-objects-in-class
vue/no-potential-component-option-typo
vue/no-ref-object-reactivity-loss
vue/no-required-prop-with-default
vue/no-restricted-block
vue/no-restricted-call-after-await
vue/no-restricted-class
vue/no-restricted-component-names
vue/no-restricted-component-options
vue/no-restricted-custom-event
vue/no-restricted-html-elements
vue/no-restricted-props
vue/no-restricted-static-attribute
vue/no-restricted-v-bind
vue/no-root-v-if
vue/no-setup-props-reactivity-loss
vue/no-static-inline-styles
vue/no-template-target-blank
vue/no-this-in-before-route-enter
vue/no-undef-components
vue/no-undef-properties
vue/no-unsupported-features
vue/no-unused-emit-declarations
vue/no-unused-properties
vue/no-unused-refs
vue/no-use-v-else-with-v-for
vue/no-useless-mustaches
vue/no-useless-v-bind
vue/no-v-text
vue/padding-line-between-blocks
vue/padding-line-between-tags
vue/padding-lines-in-component-definition
vue/prefer-define-options
vue/prefer-prop-type-boolean-first
vue/prefer-separate-static-class
vue/prefer-true-attribute-shorthand
vue/require-direct-export
vue/require-emit-validator
vue/require-expose
vue/require-macro-variable-name
vue/require-name-property
vue/require-prop-comment
vue/require-typed-object-prop
vue/require-typed-ref
vue/script-indent
vue/sort-keys
vue/static-class-names-order
vue/v-for-delimiter-style
vue/v-if-else-key
vue/v-on-handler-style
vue/valid-define-options
扩展规则：(扩展了ESLint本身提供的规则并将它们应用于<template>中的表达式)
vue/array-bracket-newline
vue/array-bracket-spacing
vue/array-element-newline
vue/arrow-spacing
vue/block-spacing
vue/brace-style
vue/camelcase
vue/comma-dangle
vue/comma-spacing
vue/comma-style
vue/dot-location
vue/dot-notation
vue/eqeqeq
vue/func-call-spacing
vue/key-spacing
vue/keyword-spacing
vue/max-len
vue/multiline-ternary
vue/no-console
vue/no-constant-condition
vue/no-empty-pattern
vue/no-extra-parens
vue/no-irregular-whitespace
vue/no-loss-of-precision
vue/no-restricted-syntax
vue/no-sparse-arrays
vue/no-useless-concat
vue/object-curly-newline
vue/object-curly-spacing
vue/object-property-newline
vue/object-shorthand
vue/operator-linebreak
vue/prefer-template
vue/quote-props
vue/space-in-parens
vue/space-infix-ops
vue/space-unary-ops
vue/template-curly-spacing
弃用的：
vue/component-tags-order
vue/no-invalid-model-keys
vue/no-ref-object-destructure
vue/no-setup-props-destructure
vue/script-setup-uses-vars
vue/v-on-function-call
移除的：
vue/experimental-script-setup-vars
vue/name-property-casing
vue/no-confusing-v-for-v-if
vue/no-unregistered-components
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}\/$`)