花了点时间把主页的code重新整理了一下，删除了不必要的部分函数，现在背景可以正确的随着分辨率大小缩放了。 并且将data()内的Css内容挪到了下方的<scrpit>下，这样审查元素时看起来的界面会更正解一些，并且避免了不必要的维护麻烦。
本篇讲一讲重新整理代码过程中Vue-typer的使用以及div的规划。
首先讲一讲我的居中头像div在页面上的定位：我的想法是讲这个div居中放在背景页面上，尽管上一篇文章并没有提到这个问题---因为头像确实是居中放置在了页面上，但是后来发现居中的不是头像的div，而是头像本身。这就导致我没有办法在头像下方添加其他我想要添加的元素：以段落元素<p>为例，他会被头像覆盖，并且div的大小也显得非常不自然---
修改前
解决方法：对这个div使用绝对布局,强制使他居中。
<script>
.Avatar{
text-align: center;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</scrpit>
修改后
之后为了让主页效果看起来更好一点，在这里我使用了Vue-Typer，引用方法很简单，这里不谈了。在div.Avatar下创建一个新的div容器，使它与上方的头像容器区分开来:
<div>
<h1>
<vue-typer :text='Info' :type-delay='250'></vue-typer>
</h1>
</div>
.....
#在data()内给Info赋值
#Info为数组类型，可以在里面放多个值
data(){
return{
Info:['Coding入门','散装江苏人'],
}
}
这里根据我的理解，<vue-typer>应该是随着他的父元素来决定自己本身的css属性，此处我给<h1>定义一些css属性并且它确实正确的应用上了这些属性：
h1{
font-size: 2em;
color: #0099ff;
margin: 3rem auto 1rem;
.vue-typer{
display: inline-block;
}
}
效果
今天就写了这么多，下次大概聊一聊Vue单文件组件，昨天写了一些但是感觉不对，所以全部推翻要重写了。
顺便存一下今天看到的，以后可能会用上的vue组件
