这是我参与「第四届青训营 」笔记创作活动的的第6天。
一、项目简介：
1. 项目用途：
本项目是仿照掘金网站开发的一个技术交流文章网站。
2.项目应用场景：
提供一个供开发人员交流开发技巧、提升编程水平的场所。
二、涉及技术&知识点：
1. 项目涉及到的知识内容：
使用前端基础（html+css+js）进行基本的H5开发以及配合前端技术框架进行高效的模块化开发。
首先是基本的页面搭建(html+css)，需要灵活使用前端开发的基本知识：html元素特性和css选择器类型及权重。
然后使用js配合前端技术框架，完善页面的互动动画，需要了解页面的生命周期和前端框架内部组件的生命周期，了解一定的页面渲染规律才可以有效地对页面元素进行操作。
2. 项目涉及到的技术应用：
项目涉及到前端技术框架vue 2.x，通过其进行高效率的模块化网站开发，它较于其他流行的前端框架，对于框架入门者较为友好，且组员大多有相关使用经验。
本项目还涉及到前端ui框架element-ui，其提供了模块化的样式组件，且原生支持vue框架，利于vue模块化开发。
三、实践过程：
1. 项目的搭建思路
本项目先对原型网站进行了分析，划分了具体的业务模块，按照业务模块配置了相应的前端路由，随后按照路由的分配开发相应的组件作为页面，对于每个页面又进一步划分为组件，实现模块化开发，逐一满足需求最后实现网站开发。
我负责的文章详情以及锚点目录的核心操作是判断html元素所处的html dom高度，对高度进行判定来获取当前正在浏览的文章片段，并且文章的跳转也摒弃了传统的锚点跳转。采用dom元素查找后自行滚动页面达到相应的高度，不足了原型网站没有过渡动画的缺憾。
2. 实践过程中的问题及解决方案
我负责开发文章详情页面，其锚点目录的开发是一个难点，采用vue组件化开发，原型实现完毕，也可以实现基本的锚点跳转功能。提交给其他组员导入后，却发现到达文章详情页面后锚点动态高亮功能并未生效。
经过排查，发现在页面的生命周期理解出了问题
原本，我理解的是等待页面渲染完毕后开始对元素进行操作，但是页面的周期并不会总是与vue的生命周期一致，本项目采用vue框架开发的是单页面网页应用程序，即一个index.html文件，网页的内容是通过前端路由进行请求切换。
可以说，在进入首页（非文章详情页面）时，window.onload就已经完成了，再跳转到文章详情页面就不会生效了。
随后，改为通过vue自身的页面刷新判定来开始页面元素操作
于是问题解决了。
3. 实践效果及提升方案
我通过网络和身边大佬的帮助，顺利地完成了实践任务，做出了文章详情页面的核心功能文章锚点目录。
但是也有些小细节尚未实现，锚点目录是使用element-ui组件实现的滚动盒子，其滚动条以及盒子高度本身是可以动态控制的，由于对其具体使用还不够熟悉，导致本组件高度是写死的。
解决方案还需要我进一步的学习和研究才有可能找到。
四、总结思考：
1.令人自豪的细节：
实现了原型网站没有的文章片段跳转过渡动画。
较其他同类型的项目，我负责的页面复现的细节较为齐全（如动态活跃锚点样式，锚点目录跟踪滚动等细节）
2.改进优化空间：
了解element-ui组件的属性以及特性，以实现更高效率的开发。
