在上一篇 Nuxt入门（为什么要学习Nuxt和Nuxt项目初始化） 介绍了Nuxt 的优势，并且开发了Hello World. 这篇我们将介绍Nuxt 中的自动导入相关技术知识
Nuxt 有哪些是会自动导入的
1. Vue3 相关的方法
现在将app.vue 中的代码改成如下的代码：
<template>
<div>
<p>desc: {{ desc }}</p>
<p>count: {{ count }}</p>
<button @click="add">add</button>
</div>
</template>
<script lang="ts" setup>
const desc = ref('这是一段描述')
const count = ref(1)
computed(() => count.value * 10)
const add = () => {
count.value++
}
watch(count,(newVal, oldVal) => {
console.log(newVal, oldVal)
})
</script>
你会发现代码中我们没有导入Vue 相关方法，但是并不会报错，能正常运行。来看下运行结果：
2. 写在components 下的组件
现在我们在根目录下面新建components 目录，并且在components 新建Header.vue组件
组件代码如下：
<template>
<header>
<nav>
<a href="#">首页</a>
<a href="#">登录</a>
<a href="#">个人中心</a>
</nav>
</header>
</template>
<script lang="ts" setup>
</script>
<style scoped>
header{
display: flex;
}
header a {
margin-left: 10px;
text-decoration: none;
}
</style>
app.vue 改成如下代码：
<template>
<div>
<Header></Header>
</div>
</template>
<script lang="ts" setup>
</script>
你会发现我们在app.vue 里面没有导入Header.vue 组件。但是我们也能正常使用。
这是一层的，如果是多层的能不能自动导入呢？其实是可以的，组件使用时要按照从文件夹开始命名。比如说现在我在components目录下新建footer文件夹， 在footer文件夹下面件Footer.vue。 再在components下新建parent目录，在parent目录下新建Child.vue组件。结构如下：
footer.vue 组件，这里的F大写也可以
<template>
<footer>
<p>这是footer </p>
</footer>
</template>
<script setup>
</script>
<style scoped>
</style>
Child.vue 组件：
<template>
<div>
child
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
App.vue 里面进行使用：
<template>
<div>
<Header></Header>
<main>内容</main>
<ParentChild></ParentChild>
<Footer></Footer>
</div>
</template>
<script lang="ts" setup>
</script>
运行效果：
可以看到依然按照预期的效果显示了。
加上文件夹进行命名这是Nuxt 的默认行为， 如果你不喜欢这样的方式，是可以修改的。在nuxt.config.ts加上下面的配置之后就不用带上路径名了。
components: [
{
path: '~/components',
pathPrefix: false
}
]
这个时候我们将app.vue 里面的ParentChild 改成Child. 来查看效果：
可以看到效果依然好使。
3. composables 目录下编写的方法
项目根目录下新建composables 目录, 在composables 目录下新建userMousePosition.ts, 代码编写如下：
import { ref, onMounted, onUnmounted } from 'vue';
export function useMousePosition() {
const x = ref(0);
const y = ref(0);
const update = (event: { pageX: number; pageY: number; }) => {
x.value = event.pageX;
y.value = event.pageY;
};
onMounted(() => window.addEventListener('mousemove', update));
onUnmounted(() => window.removeEventListener('mousemove', update));
return { x, y };
}
app.vue 里面进行使用：
<template>
<div>
{{ x }} {{ y }}
</div>
</template>
<script lang="ts" setup>
const { x, y } = useMousePosition()
</script>
<style lang="scss" scoped>
</style>
运行效果：
可以看到我们没有导入，就可以使用useMousePosition 方法， 运行效果符合预期。
composables 嵌套目录下的方法能不能自动导入呢？默认是不能的。现在我们在composables 下面新建 mouse 文件夹。将useMousePosition.ts 移动到mouse文件夹下面。这个时候来看页面运行就会报错了。
可不可以让Nuxt支持嵌套的情况呢？ 其实是可以的。 需要修改下nuxt.config.t配置，增加如下配置：
imports: {
dirs: [
// 扫描顶级模块
'composables',
// ...扫描给定目录中的所有模块
'composables/**'
]
}
这个时候来看下运行效果：
可以看到又能正常运行了。
4. utils 目录下面的函数
项目根目录下面新新建utils文件夹，utils下面创建一个format.ts 代码编写如下：
export function formatTimestamp(timestamp: number): string {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = padZero(date.getMonth() + 1);
const day = padZero(date.getDate());
const hours = padZero(date.getHours());
const minutes = padZero(date.getMinutes());
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
function padZero(num: number): string {
return num.toString().padStart(2, '0');
}
在app.vue里面进行使用：
<template>
<div>
<p>{{ dateTime }}</p>
</div>
</template>
<script lang="ts" setup>
const dateTime = formatTimestamp(new Date().getTime())
</script>
运行效果：
可以看到我们没有导入方法，方法也能正常使用，页面显示符合预期。那么utils 支不支持嵌套呢？utils 和 composables 一样默认也是不支持的，需要在nuxt.config.ts里面加配置，加上如下配置即可：
imports: {
dirs: [
// 扫描顶级模块
'composables',
// ...扫描给定目录中的所有模块
'composables/**',
'utils',
'utils/**'
]
}
在utils 下面新建date 目录将format.ts 移动到date 目录下，来观察效果：
可以考到效果依然好使。
总结
Nuxt 可以支持Vue 组合式api的自动导入，还支持components和composables， utils 目录下的自动导入，嵌套的情况需要遵循一些规则和在nuxt.config.ts中进行配置
