Nuxt.js自动导入 #

一、自动导入概述 #

Nuxt.js 提供了强大的自动导入功能，无需手动 import 即可使用组件、组合式函数和工具函数。

1.1 自动导入的内容 #

类型	目录	说明
组件	`components/`	Vue 组件
组合式函数	`composables/`	可复用逻辑
工具函数	`utils/`	工具函数
Vue API	内置	ref, computed, watch 等
Nuxt API	内置	useFetch, useState 等

二、组件自动导入 #

2.1 基本用法 #

components/AppButton.vue：

vue

<template>
  <button><slot /></button>
</template>

直接使用：

vue

<template>
  <AppButton>点击</AppButton>
</template>

2.2 命名规则 #

text

components/
├── AppButton.vue        → <AppButton />
├── AppHeader.vue        → <AppHeader />
├── blog/
│   ├── Card.vue         → <BlogCard />
│   └── List.vue         → <BlogList />
└── ui/
    ├── Button.vue       → <UiButton />
    └── Input.vue        → <UiInput />

2.3 配置组件目录 #

nuxt.config.ts：

typescript

export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      pathPrefix: false
    },
    {
      path: '~/shared/components',
      prefix: 'Shared',
      global: true
    }
  ]
})

2.4 全局组件 #

typescript

export default defineNuxtConfig({
  components: [
    {
      path: '~/components/base',
      global: true
    }
  ]
})

2.5 懒加载组件 #

vue

<template>
  <LazyHeavyComponent v-if="show" />
</template>

<script setup lang="ts">
const show = ref(false)
</script>

三、组合式函数自动导入 #

3.1 创建组合式函数 #

composables/useCounter.ts：

typescript

export const useCounter = () => {
  const count = ref(0)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  
  return {
    count,
    increment,
    decrement
  }
}

3.2 直接使用 #

vue

<script setup lang="ts">
const { count, increment, decrement } = useCounter()
</script>

3.3 命名规范 #

使用 use 前缀：useAuth, useCart, useTheme
返回响应式数据和方法
支持类型推断

3.4 嵌套目录 #

text

composables/
├── useAuth.ts
├── useCart.ts
└── features/
    ├── useSearch.ts
    └── useFilter.ts

所有文件都会被自动导入。

四、工具函数自动导入 #

4.1 创建工具函数 #

utils/formatDate.ts：

typescript

export const formatDate = (date: string | Date) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

4.2 直接使用 #

vue

<script setup lang="ts">
const formattedDate = formatDate(new Date())
</script>

4.3 工具函数示例 #

utils/slugify.ts：

typescript

export const slugify = (text: string) => {
  return text
    .toLowerCase()
    .replace(/[^\w\s-]/g, '')
    .replace(/[\s_-]+/g, '-')
    .replace(/^-+|-+$/g, '')
}

utils/currency.ts：

typescript

export const formatCurrency = (amount: number, currency = 'CNY') => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency
  }).format(amount)
}

五、内置自动导入 #

5.1 Vue API #

vue

<script setup lang="ts">
const count = ref(0)
const doubled = computed(() => count.value * 2)

watch(count, (newVal) => {
  console.log('Count changed:', newVal)
})

onMounted(() => {
  console.log('Component mounted')
})
</script>

5.2 Nuxt API #

vue

<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const { data } = await useFetch('/api/data')
const state = useState('key', () => null)
const config = useRuntimeConfig()
const appConfig = useAppConfig()

useHead({
  title: 'Page Title'
})
</script>

5.3 完整内置列表 #

API	说明
`useRoute`	当前路由
`useRouter`	路由实例
`useFetch`	数据获取
`useAsyncData`	异步数据
`useState`	共享状态
`useCookie`	Cookie
`useHead`	头部管理
`useRuntimeConfig`	运行时配置
`useAppConfig`	应用配置
`navigateTo`	导航
`abortNavigation`	中止导航
`defineNuxtComponent`	定义组件
`definePageMeta`	页面元信息
`defineNuxtRouteMiddleware`	路由中间件

六、自定义自动导入 #

6.1 配置自定义导入 #

nuxt.config.ts：

typescript

export default defineNuxtConfig({
  imports: {
    dirs: [
      'composables',
      'composables/**',
      'utils',
      'utils/**'
    ]
  }
})

6.2 添加全局导入 #

typescript

export default defineNuxtConfig({
  imports: {
    presets: [
      {
        from: 'lodash',
        imports: ['debounce', 'throttle']
      }
    ]
  }
})

使用：

vue

<script setup lang="ts">
const debouncedSearch = debounce(search, 300)
</script>

6.3 禁用自动导入 #

typescript

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

七、类型支持 #

7.1 自动生成的类型 #

Nuxt 会自动生成 .nuxt/imports.d.ts，提供类型支持。

7.2 自定义类型声明 #

types/index.d.ts：

typescript

declare module '#imports' {
  export const useCounter: () => {
    count: Ref<number>
    increment: () => void
    decrement: () => void
  }
}

八、最佳实践 #

8.1 命名规范 #

typescript

export const useFeature = () => {
  return {}
}

export const helperFunction = () => {
  return {}
}

export const CONSTANT_VALUE = 'value'

8.2 避免命名冲突 #

typescript

export const useUserAuth = () => {
  return {}
}

export const useAdminAuth = () => {
  return {}
}

8.3 文件组织 #

text

composables/
├── useAuth.ts
├── useCart.ts
├── useTheme.ts
└── features/
    ├── useSearch.ts
    └── useFilter.ts

utils/
├── format.ts
├── validate.ts
└── constants.ts

九、调试自动导入 #

9.1 查看已导入项 #

typescript

console.log(Object.keys(globalThis))

9.2 DevTools #

Nuxt DevTools 可以查看所有自动导入的内容。

十、总结 #

本章介绍了 Nuxt.js 自动导入：

组件自动导入和命名规则
组合式函数自动导入
工具函数自动导入
内置 API 自动导入
自定义自动导入配置
类型支持和最佳实践

自动导入大大提升了开发效率，下一章我们将学习插件系统。