制作可爱兔兔新年贺卡，新年攒好运

“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”

制作可爱的小兔兔，这里先做出基础贺卡样子，让其居中contain

居中的核心样式

position: absolute;
        top: 50%;
        left: 50%;

其中外壳也就是背景可以不去设置高度，让其自适应即可，这里设置的vh随视图大小而变，表示的是一个相对长度单位，1vh永远等于当前视窗高度的百分之一。

这里高度是指定大小的，主要高度自适应随着视图调整，卡片里面的间距都会发生改变，而兔子图片由于长宽问题自适应会导致出现一些间距问题，不是非常美观。
p{ color:pink; font-size:20px; margin: 10px 55px; }

这里p由于浏览器给其设置了原始间距，这里把它的padding重新赋值。

如果想设置背景图片就直接 background-image: url(); @click编写其触发事件，js中的setup中进行变量初始化以及方法的定义。

<template>
<div id="main">
    <div id="contain">
                <div id="img">
                    <img src="https://pic.imgdb.cn/item/63c8e7abbe43e0d30e6808d1.png">
                </div>
                 <p>2023好运多多</p>
                <button class="count" @click="addCount">福运 {{ count }} 连</button>
    </div>
    
</div>
</template>

less编写样式文件更加省事

可以根据dom结构进行样式编写

vue3.0

script中关键的setup,computed,watch,ref,个人认为理解难点还是在js ts语法上，需要不断琢磨。vue3和vue2数据处理，3里面将数据定义放到setup方法中，在组件初始化时会触发，2是放在data方法中。

函数方法2中使写在methods中，3是在setup中也可以定义方法，个人感觉对于初学者（没错就是我）还是比较容易搞混的，可能用的多会习惯一些。vue3.0许多特性，语法糖感觉还是蛮有意思的，还是要持续不断的学习，妈妈再也不用担心我看不懂上礼拜写的代码了，感动。

总结

感觉行业在越变越好，代码可复用性、抽象化也在不断提高。大二时自己写代码只图实现功能，代码基本到现在就看不懂每行代码目的与功能，之前写的代码也很难进行复用。