vue项目实现进入页面默认全屏的效果

要在Vue项目中实现页面打开时默认全屏的效果，你可以通过JavaScript或者利用现代浏览器的特性来完成。这里提供一种常见的做法：

1. 使用JavaScript（推荐在`mounted`生命周期钩子里设置）:

// Vue实例中
export default {
  mounted() {
    if (window.matchMedia && window.matchMedia('(width: 100vw), (height: 100vh)').matches) {
      // 如果设备宽度和高度都等于视口大小，则全屏显示
      this.fullScreen = true;
      document.documentElement.requestFullscreen(); // 对于支持fullscreen API的设备
      // 或者使用CSS `transform: scale(1)` 和 `overflow: hidden` 来模拟全屏效果
      document.body.style.transform = 'scale(1)';
      document.body.style.overflow = 'hidden';
    }
  },
  data() {
    return {
      fullScreen: false,
    };
  },
};

2. 利用CSS媒体查询（仅适用于某些情况）:

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden; /* 阻止滚动 */
}

@media screen and (min-width: 100vw) and (min-height: 100vh) {
  html, body {
    transform: scale(1);
  }
}

请注意，不是所有浏览器都支持`requestFullscreen()`，一些旧版浏览器可能需要考虑兼容性处理。