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

一、components目录

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

使用案例：

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

SideMenu.vue

<template>
    <div>
        <el-menu
        default-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使用的封装