vue 写一个星空页面

好的，下面是一个简单的示例代码，用 Vue 实现星空页面：

HTML：

<template>
  <div class="stars">
    <div class="star" v-for="(star, index) in stars" :key="index" :style="star"></div>
  </div>
</template>

CSS：

.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: white;
  animation: twinkle 1s infinite;
}

@keyframes twinkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Vue：

<script>
export default {
  data() {
    return {
      stars: [],
    };
  },
  mounted() {
    // 随机生成星星坐标和大小
    for (let i = 0; i < 100; i++) {
      let x = Math.random() * window.innerWidth;
      let y = Math.random() * window.innerHeight;
      let size = Math.random() * 2;
      this.stars.push({
        left: `${x}px`,
        top: `${y}px`,
        width: `${size}px`,
        height: `${size}px`,
      });
    }
  },
};
</script>

上面的代码实现了一个简单的星空页面，页面中随机生成了 100 个闪烁的星星。你可以根据自己的需求，修改 CSS 样式和 Vue 数据，实现更加炫酷的效果。