前言
做前端开发的同学一定有过这种痛苦：写一个组件，开头先写 10 行 import：
引入 Vue Hook、引入 UI 组件、引入工具函数、引入 Store...
// ❌ 传统的 Vue 开发体验
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Button from '@/components/Button.vue'
import { formatDate } from '@/utils/date'
import { useUserStore } from '@/stores/user'
// ... 心累
在开发 SonicToolLab 的过程中，我最大的感受就是：Nuxt 4 让代码变“干净”了。整个项目开发下来，我几乎没有手动写过 import。
今天就来复盘一下，如何利用 Nuxt 4 的工程化特性，把开发体验（DX）拉满。
🪄 1. 全自动导入：Composables 与 Utils
Nuxt 扫描目录的逻辑非常强大。默认情况下，它会自动扫描以下目录，并把导出的函数注册为全局可用：
components/composables/utils/
实战对比
假设我有一个日期格式化函数。
传统方式：
需要创建文件，导出，然后在每个需要用的页面手动导入。
Nuxt 方式：
直接在 utils 目录下创建 date.ts：
TypeScript
// utils/date.ts
export const formatDate = (date: Date) => {
return new Intl.DateTimeFormat('zh-CN').format(date)
}
然后在任何 .vue 文件中直接使用：
Code snippet
<template>
<div>{{ formatDate(new Date()) }}</div>
</template>
Nuxt 的引擎会在编译时自动分析代码，发现你用了 formatDate，它才会自动帮你生成 import 代码（Tree-shaking 依然有效，没用到的不会打包）。
📂 2. 组件的自动注册与命名规范
在 components/ 目录下的 Vue 组件也是自动导入的。
目录结构即组件名
Nuxt 推荐使用“目录嵌套”来命名组件，这比手动起名更直观。
Plaintext
components/
|-- base/
| |-- Button.vue
|-- tools/
|-- Header.vue
在页面中使用时，组件名会自动拼接目录名：
Code snippet
<template>
<BaseButton />
<ToolsHeader />
</template>
实战技巧：
如果你想让组件名短一点，可以在 nuxt.config.ts 中配置 pathPrefix 为 false，但不建议在大型项目中这样做，容易命名冲突。
🌳 3. 嵌套目录的深度扫描
默认情况下，composables 和 utils 只扫描顶层文件。如果你的工具站逻辑很复杂，分了很多文件夹怎么办？
比如：
Plaintext
composables/
|-- user/
|-- auth.ts
|-- tools/
|-- json.ts
默认情况下 auth.ts 可能不会被自动导入。我们需要在配置文件中显式告诉 Nuxt 去扫描嵌套目录。
TypeScript
// nuxt.config.ts
export default defineNuxtConfig({
imports: {
dirs: [
// 扫描 composables 下的所有子目录
'composables/**',
// 扫描 utils 下的所有子目录
'utils/**'
]
}
})
这样配置后，你的目录结构可以无限嵌套，依然享受自动导入的便利。
⚠️ 4. 避坑指南：重名危机
自动导入虽然爽，但最怕命名冲突。
场景还原：
你定义了一个 utils/ref.ts，里面导出了一个 const ref = ...。
此时，Vue 原生的 ref 就会被覆盖，导致整个项目报错。
避坑建议：
- 命名加前缀： 自定义的 hook 建议统一加
use前缀（如useMyTool）。 - 工具函数具体化： 尽量不要用
date、math这种通用词做文件名，建议用dateFormatter.ts。 - 检查
.nuxt/imports.d.ts： 如果你发现 IDE 提示类型不对，可以去.nuxt目录下看看自动生成的类型定义，通常能找到是谁覆盖了谁。
🧩 5. 类型安全的保证 (TypeScript)
有人担心： “不写 import，IDE 怎么知道类型？怎么跳转代码？”
Nuxt 4 在启动开发服务器 (nuxi dev) 时，会动态生成 tsconfig.json 和类型声明文件。
只要你使用 VS Code + Volar 插件，即使不写 import：
- 鼠标悬停可以看到函数签名。
- 按住 Ctrl 点击可以跳转到定义处。
- 输入函数名时有自动补全。
这背后是 Nuxt 强大的类型生成引擎在工作，完全不需要我们操心。
总结
在开发 SonicToolLab 时，这一套“零 Import”的体验大大提升了我的编码速度。我不再需要在这个文件里找引用路径，也不用担心重构目录后路径报错。
我们要做的，就是把文件放在对的地方（Convention），剩下的交给框架（Configuration）。
