NuxSaaS 页面结构

本文档解释了 NuxSaaS 如何组织页面的内容和组件，以及这种结构背后的原因。以 app/pages/admin/user 页面为参考示例。

NuxSaaS 如何组织页面

NuxSaaS 中的每个页面都作为 app/pages/ 下的一个目录存在，遵循 Nuxt 的基于文件的路由。例如：

app/pages/admin/user/
├── components/
    ├── BanUserModal.vue
    ├── CreateUserModal.vue
├── i18n.json
├── index.vue

• index.vue：页面的主 Vue 组件。
• i18n.json：页面专属的翻译字符串。
• 还可以包含其他文件（如 composables、子组件）以实现模块化。

Nuxt 页面检测与自定义路由行为

默认情况下，Nuxt 会将 app/pages/ 下的每个文件和目录都视为一个路由，根据其文件结构自动生成页面。这意味着，如果不做任何自定义，像页面目录下的 components 这样的子目录中的文件也会被视为独立页面并被加入路由表。

然而，在 NuxSaaS 中，路由行为已在 nuxt.config.ts 中进行了自定义。通过一个 hook 过滤掉路径中包含 component 或 /api 的路由。因此，app/pages/ 下任何页面目录中的 components 文件夹（如 app/pages/admin/user/components/）中的文件都不会被视为页面，也不会生成路由。只有像 index.vue 这样的主文件和其他未被过滤的文件才会被注册为页面。

这种做法确保了放在 components 文件夹中的子组件和工具文件仅作为页面的内部构建块使用，不会被暴露为独立路由。

// nuxt.config.ts
hooks: {
  'pages:extend': function (pages) {
    const pagesToRemove: NuxtPage[] = []
    pages.forEach((page) => {
      if (page.path.includes('component') || page.path.includes('/api')) {
        pagesToRemove.push(page)
      }
    })
    pagesToRemove.forEach((page: NuxtPage) => {
      pages.splice(pages.indexOf(page), 1)
    })
  }
}

为什么采用这种结构？

• 可扩展性：每个页面都是自包含的，便于添加、修改或移除页面而不影响其他页面。
• 可维护性：本地化的 i18n 文件和模块化组件让代码结构清晰、易于维护。
• 关注点分离：业务逻辑、UI 和翻译内容分离明确。

结论

通过遵循这种结构，NuxSaaS 能确保每个页面都健壮、易维护且易于扩展，同时为用户和开发者提供无缝的体验。