易寻
hash路由模式下的导航栏
因为网站使用的是hash模式路由，所以肯定不能用href="#abc"来跳转了，我这里是通过判断各种高度来实现导航功能。首先我们要给每个导航设定一个index，方便设定样式以及获得跳转的目的地址
- 导航栏的定位
这里获取导航栏的offsetTop,然后获取滚动条的高度scroll，如果scroll大于offsetTop，导航栏就变成固定定位，否则为绝对定位 - 判断当前的位置，触发对应的样式
首先将每一部分的offsetTop都传到导航栏这个组件中，用一个数组offsetTopArr存储。我们遍历这个数组，如果当前滚动条的高度大于等于这个下标的offsetTop，那么就将activeIndex设为这个下标(相当于之前的部分已经被完全覆盖)。如果被卷去高度document.body.scrollTop+ 视窗高度document.body.clientHeight=== 正文高度document.body.scrollHeight，也就是滚动条到底了，那么也算作处于最后一个 - 编写点击事件，使用requestAnimationFrame
这个就是判断
scrollTop和targetOffset，判断是要上移还是下移。然后平移的动画使用requestAnimationFrame。
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
使用html2canvas.js和jspdf.js实现简历生成PDF
这个好像也没什么好说的
webpack相关
CDN
引入CDN资源，具体就是在vue.config.js里配置externals，使打包的时候不对某些资源进行打包，然后再index.html里script标签引入即可。
前端性能优化 - 使用内容分发网络CDN - 掘金 (juejin.cn)
博客
虚拟列表
虚拟列表就是只渲染可视区以及缓冲区的DOM元素。我的项目是这样一个场景，首页是一个博客list，每次点击加载更多都会再加载9个item进list。其实这个场景大可不必用虚拟列表，因为不是同时渲染大量DOM，不过就当学习了。而且如果每次点击加载的数据的endIndex是通过其他页面传来的query参数(刷新后不丢失)确认，刷新后就会有渲染大量DOM的场景。下面讲讲实现的思路。
思路
首先需要完成以下几点
- 可视区域的高度(这里我陷入的一个误区，是否有必要纠结头部和底部导航栏的高度对可视区域的影响？其实没啥必要，顶多也就两个DOM的高度)
- 列表项的高度(数量 * 每项高度)
- 可视区域能展示的数量(Math.floor(可视区域高度 / 每项高度) + 2 +2是考虑上下展示不全的项目)
- 开始索引(Math.floor(被卷曲高度scrollTop / 每项高度))
- 结束索引(开始索引 + 可视区域展示的数量)
- 展示区域相对渲染区域的偏移量(scrollTop - scrollTop%每项高度 还是考虑展示不全的部分)
- 缓冲区渲染(这部分没做，要做的话就是再每次对总数据slice获得渲染区域数据的时候，给start - 可视区域展示数量，end + 可视区域展示数量，当然也要判断start会不会大于0，end会不会小于0的情况，用Math.min/max就好了， 这样就相当于多渲染了两个可视区域的数据，也不会影响原来的算法)
- 对滚动事件进行节流(节流使其不一直触发，这也是为什么要缓冲区，防止白屏)
集成开源markdown编辑器mavon-editor
这也没啥好说的，不是我自己做的，拿来用而已
文章专栏项目
vue3.0+ts，照着视频写的，写的稀巴烂，放到最后
