与 NuxtJS 一起使用

可以在 NuxtJS 项目中实现 FSD，但由于 NuxtJS 项目结构要求与 FSD 原则之间的差异，会产生冲突：

最初，NuxtJS 提供的项目文件结构没有 src 文件夹，即在项目的根目录中。
文件路由在 pages 文件夹中，而在 FSD 中，此文件夹保留用于扁平 slice 结构。

为 `src` 目录添加别名

将 alias 对象添加到您的配置中：

export default defineNuxtConfig({
  devtools: { enabled: true }, // Not FSD related, enabled at project startup
  alias: {
    "@": '../src'
  },
})

选择如何配置路由器

在 NuxtJS 中，有两种自定义路由的方法 - 使用配置和使用文件结构。在基于文件的路由情况下，您将在 app/routes 目录内的文件夹中创建 index.vue 文件，在配置情况下，您将在 router.options.ts 文件中配置路由器。

使用配置进行路由

在 app 层中，创建一个 router.options.ts 文件，并从中导出配置对象：

import type { RouterConfig } from '@nuxt/schema';

export default <RouterConfig> {
  routes: (_routes) => [],
};

要向项目添加 Home 页面，您需要执行以下步骤：

在 pages 层内添加页面 slice
将适当的路由添加到 app/router.config.ts 配置中

要创建页面 slice，让我们使用 CLI：

fsd pages home

在 ui segment 内创建一个 home-page.vue 文件，使用 Public API 访问它

export { default as HomePage } from './ui/home-page';

因此，文件结构将如下所示：

文件夹src
- 文件夹app
  - router.config.ts
- 文件夹pages
  - 文件夹home
    文件夹ui
    home-page.vue
    index.ts

最后，让我们向配置添加一个路由：

import type { RouterConfig } from '@nuxt/schema'

export default <RouterConfig> {
  routes: (_routes) => [
    {
      name: 'home',
      path: '/',
      component: () => import('@/pages/home.vue').then(r => r.default || r)
    }
  ],
}

文件路由

首先，在项目根目录中创建一个src目录，并在此目录内创建app和pages层，以及在app层内创建一个routes文件夹。因此，你的文件结构应该如下所示：

文件夹src
- 文件夹app
  - routes
- pages Pages folder, related to FSD

为了让 NuxtJS 使用 app 层内的 routes 文件夹进行文件路由，您需要按如下方式修改 nuxt.config.ts：

export default defineNuxtConfig({
  devtools: { enabled: true }, // Not FSD related, enabled at project startup
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes'
  }
})

现在，你可以在app内为页面创建路由，并将pages中的页面连接到它们。

例如，要向项目添加 Home 页面，您需要执行以下步骤：

在 pages 层内添加页面 slice
在 app 层内添加相应的路由
将 slice 中的页面与路由连接

要创建页面 slice，让我们使用 CLI：

fsd pages home

在 ui segment 内创建一个 home-page.vue 文件，使用 Public API 访问它

export { default as HomePage } from './ui/home-page';

在 app 层内为此页面创建路由：

文件夹src
- 文件夹app
  - 文件夹routes
    index.vue
- 文件夹pages
  - 文件夹home
    文件夹ui
    home-page.vue
    index.ts

在 index.vue 文件内添加您的页面组件：

<script setup>
  import { HomePage } from '@/pages/home';
</script>

<template>
  <HomePage/>
</template>

`layouts` 怎么办？

您可以将布局放在 app 层内，为此您需要按如下方式修改配置：

export default defineNuxtConfig({
  devtools: { enabled: true }, // Not related to FSD, enabled at project startup
  alias: {
    "@": '../src'
  },
  dir: {
    pages: './src/app/routes',
    layouts: './src/app/layouts'
  }
})

与 NuxtJS 一起使用

为 src 目录添加别名

选择如何配置路由器

使用配置进行路由

文件路由

layouts 怎么办？

另请参阅

为 `src` 目录添加别名

`layouts` 怎么办？