自学看了也不少 这次开始着手本地搭建一个博客类项目 后期会考虑部署到服务器
创建项目，环境配置不在赘述，可以参考这篇文章
项目创建好后转入VS， Components目录下存放的是组件 ，在<template>下编辑组件的基本框架
第一天先着手编辑动态背景大小以及头像框的淡入效果
进入生成好的HelloWorld.vue组件，用v-bind:style绑定一个css样式给预生成的<div>, 这里作为主页面，有背景图和个人头像两个部分在里面。
<div class="homepage"
v-bind:style='homepage' >
<p>{{var}}</p>//背景上的内容，通过向var传值达成
......
</div>
创建完成后要给homepage定义Css样式， 此处我直接在data()下给homepage赋值，这样做的好处（我认为的好处）是方便后期对某一项特定内容进行改写，比如后面会提到的分辨率和背景大小
///在data（）下
data(){
homepage:{
backgroundImage: "url(" + require("@/assets/Home_bg.jpg") + ")",
width:'100%',
height:'100%',
position:'fixed',
backgroundRepeat:'no-repeat',
backgroundSize:'',
},
}
背景效果.png
之后添加头像框以及淡入效果：头像要求将图片以圆形并居中显示，这里通过在父组件下创建一个新的<div>容器来达成
<div class="Avatar"
v-bind:style='Avatar'>
<transition name='fade'>
<img src= '@/assets/Avatar.jpg' v-if='show' />
</transition>
</div>
此处我没有通过继续在data()下加入Css样式的方式 而是在组件直接给<style>定义，因为此处涉及div下图片显示以及整个div的动画效果。
-当然也有我写的太乱索性推翻重写的原因
<style scoped lang="stylus">
//对div下的img标签单独设置Css样式
.Avatar >>>img{
width:260px
height:260px
border-radius:80%;
text-align:center
}
.Avatar{
position:relative
}
</style>
效果如下
头像.png
可能你会发现上下两张图的背景尺寸发生了变化 这是因为我在后面用一种笨的不能再笨的方法来写了背景的动态分辨率，在网上能找到比较常见的动态分辨率方法是这个 但是我看的不是很懂 所以用自己的方法来写， 后面会讲到
淡入效果:此处淡入效果照搬Vue.js上的过渡,但是官网上提供的方法是使用v-if, 需要用一个button来切换这个淡入淡出效果，但是一个初始界面里的动画需要手动触发显然是行不通的
按钮触发
那应该怎么办呢？我想到的方法是在首先给这个v-if赋一个false的值，然后再vue组件的created()阶段启动一个计时器，或者说，一个异步事件来改变这个v-if的值。
//过渡效果
<transition name='fade'>
<img src= '@/assets/Avatar.jpg' v-if='show' />
</transition>
---------------------------
created(){
this.$nextTick(()=>{
setTimeout(()=>{
this.show=true
},100)//100毫秒后将this.show的值改为true，达成动画效果
})
---------------------------
//在<style>下对过渡效果动画定义
.fade-enter-active, .fade-leave-active {
transition: opacity 1.5s ease-in-out;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
过渡效果
截取录屏:https://ezgif.com/crop-video
Gif制作:https://giphy.com/create/gifmaker
