Vue3 实现天气符号

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

概述

今天我们使用 Vue3 来实现几个天气符号，废话不多说，我们直接开始。

项目初始化

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

pnpm create vite vue-weather

选择 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 sasss sass-loader -D

接着我们新建如下文件 src/styles/global.scss

然后在 vite.config.ts 添加如下内容

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

天气符号

首先我删除项目中多余的代码，然后新建一个组件 src/components/weather.vue, 接着将这个组件引入到 App.vue 中，代码如下，我们接着一步一步来

• App.vue

<template>
  <Weather />
</template>

<script setup lang="ts">
import Weather from './components/weather.vue'
</script>
<style>
</style>

• weather

<template>
  <div class=""></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

</script>
<style scoped>

</style>

我们先来实现一个太阳，实现太阳之前我们先加一个蓝天的背景

<div class="weather weather--bg"></div>

.weather--bg{
 background: linear-gradient(45deg, #628aa4, #77a1b8);
}

蓝天有了之后，我们接下来实现太阳

<div class="icon__sun">
    <div class="icon__sun-lights">
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
        <div class="icon__sun-light"></div>
    </div>
</div>

    .icon__sun {
        position: absolute;
        top: 1rem;
        right: 3.5rem;
        height: 5rem;
        width: 5rem;
        background: linear-gradient(45deg, #f09559 40%, #f0ca43);
        border-radius: 50%;
        filter: drop-shadow(0 0 10px rgba(#efda90, 0.4)) drop-shadow(0 0 30px rgba(#f0ca43, 0.4));

        &-lights {
            position: absolute;
            inset: 0;
            animation: rotation 6s linear infinite;
        }

        &-light {
            position: absolute;
            top: -2.75rem;
            left: 50%;
            margin-left: -0.45rem;
            border-radius: 1rem;
            width: 0.9rem;
            height: 2.5rem;
            background: linear-gradient(45deg, #f0b343, #f0ca43);
            transform-origin: 50% 5.25rem;

            @for $c from 2 to 9 {
                &:nth-child(#{$c}) {
                    transform: rotate(($c - 1)* 360deg/8);
                }
            }
        }
    }

太阳实现后，我们还可以加一个动画，让它动起来

animation: rotation-3a02a814 6s linear infinite;

@keyframes rotation {
    100% {
        transform: rotate(1turn);
    }
}