wx/src/App.vue

<script setup>
import { RouterView } from "vue-router";
import { onMounted } from 'vue'
onMounted(() => {

})
onMounted(() => {
  //首先我们获得视口高度并将其乘以1%以获得1vh单位的值
  let vh = window.innerHeight * 0.01
  // 然后，我们将——vh自定义属性中的值设置为文档的根
  document.documentElement.style.setProperty('--vh', `${vh}px`)

  // 我们监听resize事件 视图大小发生变化就重新计算1vh的值
  window.addEventListener('resize', () => {
    // 我们执行与前面相同的脚本
    let vh = window.innerHeight * 0.01
    console.log(vh);
    document.documentElement.style.setProperty('--vh', `${vh}px`)
  })
})
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>