使用vue实现一个页面中存在很多小模块组成的页面，对于不同屏幕尺寸或者不同分辨率下，使用flex布局如何设置盒子的高度，能设置成死的高度吗

使用Vue实现一个页面中存在很多小模块组成的页面，并使用flex布局对于不同屏幕尺寸或者不同分辨率下，设置盒子的高度，可以通过CSS中的媒体查询和Vue中的计算属性结合起来，来实现不同屏幕下的高度设置。

具体的做法如下:

1. 在CSS中，使用媒体查询来检测不同的屏幕尺寸或者分辨率，然后对于不同的屏幕尺寸或者分辨率，设置不同的盒子高度。例如：

@media screen and (max-width: 576px) {
  .box {
    height: 100px;
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  .box {
    height: 150px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .box {
    height: 200px;
  }
}

@media screen and (min-width: 992px) {
  .box {
    height: 250px;
  }
}

2. 在Vue中，使用计算属性来动态获取盒子的高度，并绑定到盒子元素的style属性上。例如：

<template>
  <div class="container">
    <div class="box" v-for="(box, index) in boxes" :key="index" :style="{height: boxHeight + 'px'}">{{box}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boxes: ['模块1', '模块2', '模块3', '模块4', '模块5', '模块6', '模块7', '模块8', '模块9', '模块10'],
      boxHeight: 0
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      const screenWidth = window.innerWidth
      if (screenWidth < 576) {
        this.boxHeight = 100
      } else if (screenWidth >= 576 && screenWidth < 768) {
        this.boxHeight = 150
      } else if (screenWidth >= 768 && screenWidth < 992) {
        this.boxHeight = 200
      } else {
        this.boxHeight = 250
      }
    }
  }
}
</script>

上面的代码中，我们使用了created生命周期钩子函数来添加窗口大小改变的事件监听器，同时使用destroyed生命周期钩子函数在组件销毁时移除事件监听器。然后通过计算属性计算出盒子的高度，并绑定到盒子元素的style属性上。

综上所述，通过CSS中的媒体查询和Vue中的计算属性的结合，我们可以实现不同屏幕下的盒子高度设置，即使在使用flex布局时，也可以将盒子的高度设置成固定的值。