1.npm换源
如果以后有的情况必须用默认源,可以切回来
npm config set registry https://registry.npmmirror.com/
npm config set registry https://registry.npmjs.org/
检查npm源
npm config get registry
2./
/根目录
./当前目录
../ 父级目录
cd ..
cd ..
回到上级
3.样式定义
方法一:行内,style属性
<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">
方法二:定义在style标签中
方法三:link引入
4.react,创建
create-react-app -V
create-react-app react-app
cd react-app
npm start
5.vue图形化
vue ui
6.块级元素(div等)默认自带换行,行内元素(span等)默认不带换行
7.js使用方式
在script标签内写js代码
<script type="module"></script>
引入文件
<script type="module" src="/static/js/index.js"></script>
import引入到当前作用域
8.element的el-table-column的prop
只能传字符串,boolean或者对象需要转成字符串
9.属性定义
js中,定义对象中属性时,冒号定义,逗号分隔
css中,定义属性时,冒号定义,分号分隔
10.element组件的v-show可能不生效
因为element的display,可能会覆盖v-show的display:none。
解决方法1:放在这个element组件的外层。
解决方法2:用v-if。
11.v-html的pre标签,导致内容不变,过长从而超出长度
可以考虑换成p标签之类的
result = result.replaceAll('<pre', '<p');
result = result.replaceAll('</pre>', '</p>');
12.overflow:auto;可以让超出的变为滚动
13.css透明度,opacity会影响,子元素透明度,可以转换为rgba()的第四个参数
14.图片太大,可以用tinypng压缩(https://tinypng.com)
15.dvh代替vh,解决底部栏造成的问题
16.vite与webpack相比,开箱即用,可能少量配置,相当于webpack的很多配置。
17.css选择器性能
css选择器是从右往左,查看匹配。
在源码中,CSSSelectorList这个链表本身,初始化时候就是从右往左的。
性能方面,一般class(类)比attribute(属性)选择器性能好。
因为class只找class,而attribute进行的是通用规则的处理,会有更多逻辑。
18.js闭包,在单例模式(一个类,只有一个实例)中,适合用来做全局状态管理,比如vuex/pinia/redux。
19.vue的v-html,eval(),可能引起xss攻击。
20.word-wrap相当于overflow-wrap的别称。
21.div根据文字自动变高度(word-break,字体超出换行,默认中文日文宽度不够自动换行,英文数字不可以)
22.埋点在网页关闭时,unload或者beforeunload,可能页面已经卸载,发送失败。强行耗时,用户体验不好。
sendBeacon不影响页面卸载/新页面载入。
23.获取浏览器宽高
console.log(window.innerWidth,window.innerHeight);
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
console.log(document.body.clientWidth,document.body.clientHeight);