在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>