Использование с SvelteKit
В SvelteKit проекте возможно реализовать FSD, однако возникают конфликты из-за различий между требованиями к структуре проекта SvelteKit и принципами FSD:
- Изначально, SvelteKit предлагает файловую структуру внутри папки
src/routes
, в то время как в FSD роутинг должен быть частью слояapp
. - SvelteKit предлагает складывать всё, что не относится к роутингу в папку
src/lib
.
Настроим конфиг
svelte.config.ts
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config}*/
const config = {
preprocess: [vitePreprocess()],
kit: {
adapter: adapter(),
files: {
routes: 'src/app/routes', // перемещаем роутинг внутрь app слоя
lib: 'src',
appTemplate: 'src/app/index.html', // Перемещаем входную точку приложения внутрь слоя app
assets: 'public'
},
alias: {
'@/*': 'src/*' // Создаём алиас для директории src
}
}
};
export default config;
Перемещение файлового роутинга в src/app
Создадим слой app, переместим в него входную точку приложения index.html
и создадим папку routes.
Таким образом, ваша файловая структура должна выглядеть так:
├── src
│ ├── app
│ │ ├── index.html
│ │ ├── routes
│ ├── pages # Папка pages, закреплённая за FSD
Теперь, вы можете создавать роуты для страниц внутри app
и подключать к ним страницы из pages
.
Например, чтобы добавить главную страницу в проект, вам нужно сделать следующие шаги:
- Добавить слайс страницы внутри слоя
pages
- Добавить соответствующий роут в папку
routes
из слояapp
- Совместить страницу из слайса с роутом
Для того чтобы создать слайс страницы, воспользуемся CLI:
fsd pages home
Создайте файл home-page.vue
внутри сегмента ui, откройте к нему доступ с помощью Public API
src/pages/home/index.ts
export { default as HomePage } from './ui/home-page';
Создайте роут для этой страницы внутри слоя app
:
├── src
│ ├── app
│ │ ├── routes
│ │ │ ├── +page.svelte
│ │ ├── index.html
│ ├── pages
│ │ ├── home
│ │ │ ├── ui
│ │ │ │ ├── home-page.svelte
│ │ │ ├── index.ts
Добавьте внутрь index.svelte
файла компонент вашей страницы:
src/app/routes/+page.svelte
<script>
import { HomePage } from '@/pages/home';
</script>
<HomePage/>