使用 Vue3 画一只可爱的小蜜蜂

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

概述

今天我们使用 Vue3 来画一只可爱的小蜜蜂。

项目开始

首先我们新建一个项目，执行如下命令

pnpm create vite vue-honeybee

选择 vue ，接着选择 vue-ts ，回车，等待项目安装完成， cd 进入项目根目录下，接着安装项目需要的依赖包

pnpm install

安装完成后，我们启动项目

pnpm run dev

控制台输出如下内容

vite v2.9.10 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 353ms.

说明项目正常启动了，下面我们接着开发

项目正式开发前，我们先来安装下 sass sass-loader, 在终端中执行如下命令

pnpm install sass sass-loader -D

接着我们新建一个文件 src/styles/global.scss, 接着在 vite.config.ts 文件中添加如下内容

...
css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "./src/styles/global.scss";',
    },
  },
},
...

小蜜蜂

删除项目中多余的代码，接着我们新建一个组件 src/components/honeybee.vue，并将这个组件引入 App.vue,

• App.vue

<template>
  <Honeybee />
</template>
<script setup lang="ts">
import Honeybee from './components/honeybee.vue'
</script>

• honeybee.vue

<template>
<div class="honeybee"></div>
</template>
<script setup lang="ts">

</script>
<style lang="scss" scoped>

</style>

项目初始化完成后，我们一步一步来画一只可爱小蜜蜂，先来把小蜜蜂的躯干部分画出来,根据确定的躯干部分，再慢慢的添加小蜜蜂的其他部分

<div class="honeybee">
    <div class="honeybee-body"></div>
</div>

.honeybee {
    width: 500px;
    height: 500px;
    position: relative;
}

.honeybee-body {
    width: 150px;
    height: 90px;
    position: absolute;
    top: 50%;
    left: 27%;
    transform: translate(-50%, -50%);
    background-color: #ffd400;
    background-image: radial-gradient(circle at 75% 45%, #ffd400 42%, #8a4514 51%, #8a4514 54%, #ffd400 64%, #ffd400 66%, #8a4514 74%, #8a4514 77%, #ffd400 86%);
    border-radius: calc(12 * 1vh) calc(9 * 1vh) calc(9 * 1vh) calc(6 * 1vh);
    z-index: 1;
}

小蜜蜂的身体部分画出来后，我们根据身体部分的定位，然后其他也根据身体部分的定位来确定其他部分的定位，然后一步一步的画出来

接着是小蜜蜂的脸,眼睛，鼻子等

<div class="honeybee">
    <div class="honeybee-body"></div>
    <div class="honeybee-head">
        <div class="honeybee-eye"></div>
        <div class="honeybee-nose"></div>
        <div class="honeybee-mouth"></div>
    </div>
</div>

.honeybee-head {
    position: absolute;
    top: 45%;
    left: 28%;
    z-index: 100;
    width: 50px;
    height: 50px;
}

.honeybee-eye {
    position: absolute;

    &::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #333;
        position: absolute;
        top: 10px;
        left: 5px;
    }

    &::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #333;
        position: absolute;
        top: 10px;
        left: 50px;
    }
}

.honeybee-mouth {
    position: absolute;
    top: 47%;
    left: 39%;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 3px solid #333;
    clip-path: inset(60% 5% 0 5%);
    border-radius: 50%;
    z-index: 2;
}

最后我们画小蜜蜂的翅膀

<div class="wing-left"></div>
<div class="wing-right"></div>

.wing-left,
.wing-right {
    position: absolute;
    top: 13vh;
    left: calc(9 * 1vh);
    width: calc(8 * 1vh);
    height: calc(16 * 1vh);
    background-color: #48d1cc;
    z-index: 2;
    transform-origin: 75% 100%;
    transform: rotate(-34deg);
    border-radius: calc(8 * 1vh) calc(5 * 1vh) calc(2 * 1vh) calc(10 * 1vh);
}

.wing-left {
    left: calc(16 * 1vh);
    z-index: 0;
    transform-origin: 25% 100%;
    transform: rotate(34deg);
    border-radius: calc(5 * 1vh) calc(8 * 1vh) calc(10 * 1vh) calc(2 * 1vh);
}