一、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/>组件会通过路由渲染后的内容替换，其他内容会出现在所有页面
三、pages文件夹
Nuxt 将自动为你的 ~/pages/ 目录中的每个页面创建一个路由
index.vue组件会默认渲染到<NuxtPage/>组件中，micro.vue则会匹配到/micro路由地址后被渲染
四、plugin文件夹
参考上期文章对axios使用的封装