vue的组件页面怎么设置全屏大小

有两种方法可以设置Vue组件页面为全屏大小：

1. 使用CSS样式设置组件的宽度和高度为100%：

在组件的样式中添加如下代码：

<style>
  .fullscreen {
    width: 100%;
    height: 100%;
  }
</style>

在组件的模板中添加一个div，将其class设置为fullscreen：

<template>
  <div class="fullscreen">
    <!-- 组件内容 -->
  </div>
</template>

2. 使用Vue的计算属性设置组件的宽度和高度为窗口大小：

在组件中添加如下代码：

<template>
  <div :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: 0,
      windowHeight: 0,
    };
  },
  computed: {
    fullscreen() {
      return {
        width: this.windowWidth + 'px',
        height: this.windowHeight + 'px',
      };
    },
  },
  mounted() {
    this.getWindowSize();
    window.addEventListener('resize', this.getWindowSize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getWindowSize);
  },
  methods: {
    getWindowSize() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
    },
  },
};
</script>

这个组件会在挂载时获取窗口大小，然后使用计算属性将div的宽度和高度设置为窗口大小。当窗口大小改变时，组件会重新计算div的大小。