FSD решает главную проблему масштабных проектов: "куда положить файл?" и "кто от кого зависит?". Правила строгие, и это плюс -- новый разработчик быстро ориентируется. **Полная структура FSD для Vue:** ``` src/ app/ # Слой 7: инициализация приложения App.vue main.ts router.ts providers/ # Глобальные провайдеры ThemeProvider.vue styles/ global.css pages/ # Слой 5: страницы (полные экраны) home/ ui/ HomePage.vue model/ homeModel.ts index.ts product-detail/ ui/ ProductDetailPage.vue index.ts cart/ ui/ CartPage.vue index.ts widgets/ # Слой 4: составные блоки header/ ui/ AppHeader.vue index.ts product-catalog/ ui/ ProductCatalog.vue model/ catalogModel.ts index.ts shopping-cart/ ui/ ShoppingCart.vue index.ts features/ # Слой 3: пользовательские действия add-to-cart/ ui/ AddToCartButton.vue model/ addToCartModel.ts api/ addToCartApi.ts index.ts auth-by-email/ ui/ EmailLoginForm.vue model/ authModel.ts api/ authApi.ts index.ts toggle-theme/ ui/ ThemeToggle.vue model/ themeModel.ts index.ts search-products/ ui/ SearchBar.vue model/ searchModel.ts index.ts entities/ # Слой 2: бизнес-сущности product/ ui/ ProductCard.vue ProductPrice.vue model/ productStore.ts productTypes.ts api/ productApi.ts lib/ formatProduct.ts index.ts user/ ui/ UserAvatar.vue model/ userStore.ts userTypes.ts api/ userApi.ts index.ts cart-item/ ui/ CartItemRow.vue model/ cartItemTypes.ts index.ts shared/ # Слой 1: общий код ui/ BaseButton.vue BaseInput.vue BaseModal.vue lib/ formatDate.ts formatCurrency.ts api/ httpClient.ts config/ constants.ts types/ common.ts ``` **Правило зависимостей (ключевое в FSD):** ``` app -> pages -> widgets -> features -> entities -> shared ↑ ↑ Может импортировать из любого слоя ниже Ни от кого не зависит features НЕ импортирует из widgets или pages entities НЕ импортирует из features Слайсы одного слоя НЕ импортируют друг из друга ``` **Сегменты внутри слайса:** ``` feature/add-to-cart/ ui/ # Компоненты Vue model/ # Composables, store, бизнес-логика api/ # Запросы к серверу lib/ # Утилиты, хелперы config/ # Константы, конфигурация index.ts # Публичный API слайса ``` **Пример: feature "add-to-cart":** ```typescript // features/add-to-cart/model/addToCartModel.ts import { ref } from 'vue' import { cartItemApi } from '../api/addToCartApi' import { useCartStore } from '@/entities/cart-item/model/cartItemStore' import type { Product } from '@/entities/product' export function useAddToCart() { const loading = ref(false) async function addToCart(product: Product, quantity: number = 1) { loading.value = true try { await cartItemApi.add(product.id, quantity) const cartStore = useCartStore() cartStore.addItem(product, quantity) } finally { loading.value = false } } return { addToCart, loading } } ``` ```vue ``` ```typescript // features/add-to-cart/index.ts export { AddToCartButton } from './ui/AddToCartButton.vue' export { useAddToCart } from './model/addToCartModel' ``` **Пример: entity "product":** ```typescript // entities/product/model/productTypes.ts export interface Product { id: string name: string price: number category: string imageUrl: string } ``` ```vue ``` **Пример: widget "product-catalog" (собирает entity + features):** ```vue ``` **Пример: page:** ```vue ``` ## 📌 Реальные кейсы - **Средние и крупные команды (5+)** -- FSD снижает конфликты при мерже, каждый работает в своём слайсе - **Проекты с долгим жизненным циклом** -- через год легко найти, где живёт фича - **Микрофронтенды** -- FSD-модули хорошо конвертируются в автономные микрофронты ## Частые ошибки ```javascript // ❌ Feature импортирует из другой feature // features/add-to-cart/ -> features/auth-by-email/ // Нарушение: слайсы одного слоя независимы // ✅ Общее выноси в entities или shared // Или координируй на уровне widget/page ``` ```javascript // ❌ Entity содержит бизнес-action // entities/product/ui/ProductCard.vue // -- это feature, не entity // ✅ Entity -- только отображение, actions через slot ``` ```javascript // ❌ FSD для маленького проекта (5 страниц) -- оверинжиниринг // Создаёшь 6 слоёв для todo-app // ✅ FSD оправдан от ~15 страниц и 3+ разработчиков ``` ## Резюме FSD -- архитектура со строгими слоями (app, pages, widgets, features, entities, shared). Зависимости текут только вниз. Слайсы одного слоя независимы. Entity -- отображение сущности без actions. Feature -- конкретное пользовательское действие. Widget -- композиция entities + features. Page -- сборка виджетов. Публичный API каждого слайса -- через index.ts. Подходит для средних и крупных проектов с командой от 3+ человек. ---

{{ product.name }}

Каталог товаров

Как реализовать Feature-Sliced Design в Vue?