---
title: "utils"
description: "使用 utils/ 目录实现应用程序中工具函数的自动导入。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/directory-structure/utils"
---
# utils

> 使用 utils/ 目录实现应用程序中工具函数的自动导入。

[`utils/` 目录](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/utils) 的主要用途是区分 Vue 组合式函数和其他自动导入的工具函数。

## 用法

**方式 1：** 使用命名导出

```ts twoslash [utils/index.ts]
export const { format: formatNumber } = Intl.NumberFormat('en-GB', {
  notation: 'compact',
  maximumFractionDigits: 1,
})
```

**方式 2：** 使用默认导出

```ts twoslash [utils/random-entry.ts or utils/randomEntry.ts]
// 它将以 randomEntry() 的形式使用（文件名去扩展名后转为驼峰命名）
export default function (arr: Array<any>) {
  return arr[Math.floor(Math.random() * arr.length)]
}
```

现在你可以在 `.js`、`.ts` 和 `.vue` 文件中使用自动导入的工具函数

```vue [app.vue]
<template>
  <p>{{ formatNumber(1234) }}</p>
</template>
```

::read-more{to="https://nuxt.zhcndoc.com/docs/3.x/guide/concepts/auto-imports"}
::

::link-example{to="https://nuxt.zhcndoc.com/docs/examples/features/auto-imports"}
::

::tip
`utils/` 的自动导入工作方式和扫描方式与 [`composables/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/composables) 目录完全相同。
::

::important
这些工具函数仅在应用的 Vue 部分可用。:br
只有 `server/utils` 会在 [`server/`](https://nuxt.zhcndoc.com/docs/3.x/directory-structure/server#server-utilities) 目录中自动导入。
::


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.