在vue 3中导入js类的正确方法是什么

Question

我想将 .js 文件中的一个类导入到我在 vue 3 中的组件中，但它会给我一个错误

[Vue警告]：在...执行渲染函数期间出现未处理的错误

Uncaught (in promise) TypeError: $setup.Utils.capitalizeFirstLetter is not a function

我知道问题出在我如何在组件中使用它，我正在使用 jetstream 和惯性 js 开发 Laravel 8 应用程序

我的课 utils.js

export class Utils {
   capitalizeFirstLetter(str) {
     //code...
   }
}

我在 vue 中的组件

<template>
     <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ Utils.capitalizeFirstLetter(title) }}
      </h2>
</template>

<script>
import { Utils } from '@/utils/utils.js'

export default {  
  setup() {

      return {
          Utils
      }
  }
};
</script>

哪位高手可以给我解惑

Answer 1

最后我明白我做错了什么，我必须在 vue 2 中看到一些例子，你只需要在一个变量中实例化这个类，如果你可以访问方法

<template>
     <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ Util.capitalizeFirstLetter(title) }}
      </h2>
</template>

<script>
import { Utils } from '@/utils/utils.js'

export default {  
  setup() {
      const Util = new Utils;

      return {
          Util
      }
  }
};
</script>