怎么在vue3+ts里用 statsJs并在页面左上角

在 Vue 3 + TypeScript 中使用 stats.js 并将其显示在页面左上角，你可以按照以下步骤进行操作：

1. 安装 stats.js。你可以使用 npm 或 yarn 进行安装：

npm install stats.js

或

yarn add stats.js

2. 在你的 Vue 3 + TypeScript 项目中，创建一个新的组件用于显示 stats.js 的统计信息。你可以将其命名为 `Stats.vue`。在该组件中，你可以使用 `<canvas>` 元素来绘制统计图。

<template>
  <canvas ref="statsCanvas" class="stats-canvas"></canvas>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Stats from 'stats.js';

export default defineComponent({
  name: 'Stats',
  setup() {
    const statsCanvas = ref<HTMLCanvasElement | null>(null);

    onMounted(() => {
      const stats = new Stats();
      stats.showPanel(0); // 0: FPS, 1: ms, 2: MB, 3+: custom
      stats.dom.style.position = 'absolute';
      stats.dom.style.left = '0';
      stats.dom.style.top = '0';
      document.body.appendChild(stats.dom);

      function animate() {
        stats.begin();
        // 执行你的更新逻辑
        stats.end();
        requestAnimationFrame(animate);
      }
      requestAnimationFrame(animate);
    });

    return {
      statsCanvas,
    };
  },
});
</script>

<style scoped>
.stats-canvas {
  z-index: 9999;
}
</style>

3. 在你需要使用 stats.js 的组件中，引入并使用 `Stats` 组件，并将其放置在页面的左上角。

<template>
  <div>
    <Stats />
    <!-- 其他组件内容 -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Stats from './Stats.vue';

export default defineComponent({
  name: 'App',
  components: {
    Stats,
  },
});
</script>

现在，stats.js 的统计信息将会显示在页面的左上角。你可以根据需要调整样式和位置。希望对你有所帮助！