Vue 博客项目的复盘和收获

对经过一周来，独立完成的一个 Vue 博客小项目，对学到的收获进行总结。

项目地址：github.com/tingzhong66…

演示地址：http://129.28.186.105:30001

对动画、过渡的使用熟练了一些。学会使用了 anime 这个动画库。

学会使用 marked 库，进行简单配置。

• 进一步学会了对 h 标题标签的提取，并生成一个目录。

  对每一个 h 标签加一个共有的类名。

  等 md 渲染完成后，进行获取所有含有这个共有的类名 dom 对象，即所有 h 标签

  初步进行遍历 dom 对象数组，生成一个一维数组目录

  遍历一维数组目录，对 h 标签等级进行判断一系列的逻辑，最后生成一个多维的数组。即目录。

• 再进一步学会了，监听滚动距离，判断出当前浏览的标题，并在侧边栏中进行高亮显示当前浏览的标题。

  组件渲染后进行监听滚动，销毁后移除监听事件

  对目录数组进行遍历，分别获取 各个标题距离网页顶部的距离 与 当前滚动距顶距离 之 差 的绝对值

  绝对值最小，即为当前浏览的标题，即为高亮显示。

  然后再对子目录进行递归判断

学会了使用 highlight.js 在 marked 的配置中，对代码块进行高亮显示

学会了在 Vue 项目中配置并使用第三方包的 cdn

转载于:https://juejin.im/post/5cfde96651882555f446618e