当青训营遇上码上掘金

分析要求

我们首先来分析一下任务要求：“请大家围绕“我的名片”这个主题进行代码创作”。因此这个任务的要求就是用代码来做一次自我介绍，对于我们前端班级的同志们而言就是写一个网页来介绍自己。

这个问题可以分成两个层面：

• 如何做自我介绍
• 如何使用前端技术来做自我介绍

如何做自我介绍

什么是好的自我介？我们可以首先想想什么是不好的自我介绍：

• 基本信息不明确，别人听了半天都不知道你的基本信息
• 对自己的人生经历只有阐述，没有总结归纳
• 像流水账一样洋洋洒洒，但是没有重点

因此我对自我介绍的定义是某一个人为了某种目的在一定时间内完成交代基本信息和引起他人日后继续交往意愿的一次表达。

因此我认为一个好的自我介绍需要有如下特点：

• 简洁明了交代基本信息
• 根据场景特点展现自己相应的个人特质
• 能够让人产生继续深入交流的意愿

如何使用前端技术来做自我介绍

相较于传统的口头自我介绍或者说书面的简历，使用前端技术做出来的自我介绍拥有更加丰富的视听效果，同时它以页面为隔离单位，可以将自己的信息更加有层次地进行表达。

使用的技术

本次的自我介绍我是用Vue2。虽然自我介绍是一个偏向于静态的页面，同时要是真有所图的话虽好还要实现SSR，但是Vue2平时主要是在学，用的也比较少，这次练练手。

实现概要

项目结构

我的自我介绍由四个部分组成：基本信息、技术栈、作品集、联系方式。因此项目结构就是每个部分一个组件，然后集成在resume.vue组件中

鼠标滚轮切换页面

由于项目中可以利用书鼠标滚轮的滑动来切换页面，因此需要使用@mousewheel事件，但是我一开始没有搞清楚什么数值表示的是向上滚动什么表示的是向下滚动，因此搞了老半天。后来还是老老实实把event事件打印出来才发现用event.deltaY判断就可以了。

鼠标滚轮节流

滚动切换页面实现了之后我在那转来转去玩得很嗨，但是突然发现这样子太鬼畜了，一个事件短时间内被频繁调用很可能出现卡顿，因此需要我采用了节流方案，设置一秒内最多滚动一次。