怎么在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"></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
      statsCanvas.value?.appendChild(stats.dom);

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

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

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>

现在，你就可以在 Vue 3 + TypeScript 项目中使用 stats.js 来显示性能统计信息了。记得根据你的需求进行配置和样式的调整。希望对你有所帮助！