pages目录中的components管理

页面文件夹中创建组件

/pages
  /home
    /index.vue
    /components
       /Banner.vue

删除nuxt 自动生成的组件页面

在构建时排除这些components的子文件

在nuxt.config.ts中配置

hooks: {
  'pages:extend'(pages) {
    const pagesToRemove: NuxtPage[] = []
    pages.forEach((page) => {
      if (page.path.includes('component')) pagesToRemove.push(page)
    })

    pagesToRemove.forEach((page: NuxtPage) => {
      pages.splice(pages.indexOf(page), 1)
    })
  }
}

配置自动导入组件

在nuxt.config.ts中配置

components: [
  "~/components",
  {
    path: "~/pages",
    pattern: "*/components/**",
    pathPrefix: false,
  },
];

components目录中排除ts文件

在nuxt.config.ts中配置

components: {
    dirs: [
      {
        path: "~/components",
        pathPrefix: false,
        extensions: [".vue"],
        ignore: ["**/layout/*.vue"], // 忽略 layout 文件夹下的组件导入
      },
    ],
},