nuxt 使用utils

在 Nuxt.js 中，可以使用 `~/utils` 目录来存放一些常用的工具类函数或者常量，这些函数和常量可以在项目的任何地方被引用和使用。下面是一个简单的示例：

1. 在 Nuxt.js 项目的根目录下创建 `utils` 目录。

2. 在 `utils` 目录下创建一个名为 `myUtils.js` 的文件，该文件中定义了一个名为 `myFunction` 的工具函数：

export function myFunction() {
  console.log('This is my function!');
}

3. 在需要使用 `myFunction` 函数的组件中，可以通过 `import` 语句引入 `myUtils.js` 文件，并使用 `myFunction` 函数：

<template>
  <div>
    <button @click="onClick">Click me</button>
  </div>
</template>

<script>
import { myFunction } from '~/utils/myUtils';

export default {
  methods: {
    onClick() {
      myFunction();
    },
  },
};
</script>

需要注意的是，如果您在 `utils` 目录下创建了多个文件，您需要在 `nuxt.config.js` 文件中配置以便 Nuxt.js 能够正确地识别和处理这些文件。您可以在 `nuxt.config.js` 文件的 `build` 配置中添加以下代码：

build: {
  extend(config, ctx) {
    // 添加 resolve.alias 配置，指向 utils 目录
    config.resolve.alias['@utils'] = path.resolve(__dirname, 'utils');
  },
},

这样，您就可以在组件中使用 `import { myFunction } from '@utils/myUtils';` 来引用 `myUtils.js` 文件了。