用Vue.js点亮中秋节，传递团圆心愿

前端

2023-09-27 08:13:00

中秋节，用Vue.js献上一份团圆心愿

中秋节，一年一度的团圆佳节，承载着中华儿女绵延千年的相思与祝福。月满中秋，人团家圆，在这充满诗情画意的夜晚，让我们用Vue.js制作一份中秋祝福，将这份浓浓心意传递给远方的亲朋好友。

初识Vue.js：友好且强大的前端框架

Vue.js是一个渐进式的、轻量级的前端JavaScript框架，它以友好且强大的特性受到了广泛开发者的青睐。Vue.js的组件化开发模式让我们能够轻松创建可重用、可维护的前端界面，从而有效提升开发效率和代码质量。

制作中秋祝福：分步拆解

1. 准备开发环境

安装Node.js和npm
初始化Vue.js项目：vue create my-mid-autumn

2. 设计UI界面

<template>
  <div class="mid-autumn-wrapper">
    <h1>中秋节快乐</h1>
    <p>但愿人长久，千里共婵娟</p>
    <button @click="toggleAnimation">点亮月饼</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const isLit = ref(false)

    const toggleAnimation = () => {
      isLit.value = !isLit.value
    }

    return {
      isLit,
      toggleAnimation
    }
  }
}
</script>

<style>
.mid-autumn-wrapper {
  text-align: center;
  font-family: '微软雅黑';
}

h1 {
  font-size: 3rem;
  margin-top: 50px;
}

p {
  font-size: 1.5rem;
  margin-top: 20px;
}

button {
  background-color: #e67e22;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
}

.lit {
  animation: moon-glow 2s infinite alternate;
}

@keyframes moon-glow {
  0% {
    box-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffeb3b;
  }
  100% {
    box-shadow: 0 0 10px #ffeb3b, 0 0 20px #ffeb3b;
  }
}
</style>