1、 flex布局子元素不设高度时会继承父元素的高度，造成子元素高度撑开（图片拉伸问题）
2、返回顶部按钮
- 兼容问题。
解决： 用以下两种方式
- document.documentElement.scrollTop
- document.body.scrollTop
- 返回顶部
- 点击其他地方内容隐藏
- node.contains(targer) node为最外层节点，target为事件源节点，target在node内函数返回true,反之则false
- 点击其他地方内容隐藏
3、 场景： 设计稿为1920px的一个模块,里面的文字为12px,由于浏览器字体最小只能显示12px,rem适配时其他地方缩小，但是字体不缩小造成布局错乱问题。
解决：
window.addEventListener("resize", (e) => {
this.percentage = document.body.clientWidth / 1920;
courseId.style.transform = `translate(-50%,-50%) scale(${this.percentage})`;
});js动态计算scale的值进行缩放
4、锚链接在部分浏览器第一次进入页面不跳转问题
原因： vue中第一次进入页面会设置滚动等于0（顶部）
解决：
handlescroll() {
const hash = location.hash;
if (hash) {
const id = hash.split('#')[1];
const ele = document.querySelector(`#${id}`)
ele && ele.scrollIntoView(true)
}
},进入页面后获取到页面地址 格式大致为： xxxx.html/#node
node为当前页面要跳转的模块的id
ele.scrollIntoView(true) //参数为true跳到当前模块。
5、跳转到新页面并打开新页面（js）
const newf = this.$router.resolve({ path });
window.open(newf.href, "_blank");newf拿到要跳转的路径及参数，_blank打开新页面
6、动态图片
引入图片方式用变量的方式,否则会找不到图片路径
requir（‘xxxx.png’）;
7、 动态监听设备宽度：onrisize 事件监听window.clientWidth 从而动态改变移动端和pc端的一些变量（如：图片路径，样式的大小等）
8、nuxt框架的根组件为 /layouts/default.vue 文件
page文件下的所有的页面都相当于根组件的子组件
/layouts/default.vue 文件的作用
- 写公共的样式（也可以写在assets文件夹下），
- 写公共js代码,如： 百度统计、监听锚链接（上面提到锚链接第一次不跳转，统一在这处理
404页面
/layouts/error.vue 文件的作用
- 所有不符合的路径都进入这里404页面，vue传统是在router配置下设置
9、 页面文字较多时写在.vue文件下造成阅读困难问题
添加一个mock文件夹，在里面统一管理
10、
动态改变导航地址（不刷新）
window.history.pushState({}, 0, window.location.href.split('?')[0])window.location.href.split('?')[0]，将地址以？拆分取前面的部分