【实用】nuxt3工程项目的一些目录理解

embedded/2025/3/6 1:32:34/

一、components目录

公共组件目录，不需要像vue2/vue3工程一样，在需要使用的组件内必须手动引入，Nuxt 会自动导入此目录中的任何组件（以及您可能正在使用的任何模块注册的组件）

使用案例：

在conponents文件夹内新建SideMenu.vue文件和user文件夹，文件夹下新建Info.vue组件

SideMenu.vue

<template><div><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></div>
</template>
<script setup>
const handleOpen = ()=>{}
const handleClose = ()=>{}
</script>

Info.vue

<template><div><h1>User Info Page</h1></div>
</template>
<script setup>
</script>

在需要使用公共组件的页面可以直接使用

<template><el-container><el-aside :width="sideWidth"><side-menu></side-menu></el-aside><el-container><el-header>头部</el-header><el-main><NuxtPage></NuxtPage></el-main><el-footer>底部</el-footer></el-container></el-container>
</template>
<script setup>
const sideWidth = ref('200px')
</script>
<style lang="less" scoped>
.el-container{height: 100%;}
</style>

而Info组件名称将基于其自身的路径目录和文件名，重复的部分将被删除。因此，该组件的名称将是<UserInfo/>

如果您想根据组件的名称而不是路径自动导入组件，则需要使用配置对象的扩展形式将 pathPrefix 选项设置为 false：

export default defineNuxtConfig({components: [{path: '~/components',pathPrefix: false,},],
});

这样配置之后就可以直接使用<Info/>组件或者<LazyInfo/>后者实现懒加载

二、layouts文件夹

公共布局使用，用于将通用的 UI 模式提取到可重用的布局中

default.vue

<template><el-container><el-aside :width="sideWidth"><side-menu></side-menu></el-aside><el-container><el-header>头部</el-header><el-main><NuxtPage></NuxtPage></el-main><el-footer>底部</el-footer></el-container></el-container>
</template>
<script setup>
const sideWidth = ref('200px')
</script>
<style lang="less" scoped>
.el-container{height: 100%;}
</style>

除了<NuxtPage/>组件会通过路由渲染后的内容替换，其他内容会出现在所有页面