BetaДокументация для beta‑теста, возможны ошибки и неточности.
Open FEOD

WARNING

Эта статья сгенерирована AI и требует ручной доработки.

Переход на FEOD ​

Если вы решили перейти на FEOD в существующем проекте, рекомендуется делать это постепенно. В этом разделе мы рассмотрим пошаговый процесс миграции.

Для контроля архитектуры во время переноса подключите линтер: в руководстве по постепенной миграции описаны legacy-слои, исключения и включение проверок частями.

Пошаговый план миграции ​

Шаг 1: Выделение App ​

Начните с выделения app для входной точки приложения. Соберите всё, что относится к запуску и настройке приложения:

  • Роутер
  • Конфигурации
  • Интеграции с внешними сервисами
  • Лейауты
  • Точки входа (entry.ts, main.ts)

До:

  • src
    • router
    • config
    • main.ts
    • App.vue

После:

  • src
    • app
      • router
      • config
      • entry.ts
      • App.vue

Шаг 2: Определение Pages ​

Определите и структурируйте pages. Соберите все страницы приложения и организуйте их по файловой структуре, соответствующей роутингу.

До:

  • src
    • views
      • Home.vue
      • About.vue
      • Login.vue

После:

  • src
    • pages
      • home.vue
      • about.vue
      • login.vue

Шаг 3: Выделение Common ​

Выделите common для общих утилит и компонентов. Переместите всё, что используется в разных частях приложения и не привязано к конкретной бизнес-логике.

До:

  • src
    • components
      • Button.vue
      • Input.vue
    • utils
      • clamp.ts
      • formatDate.ts

После:

  • src
    • common
      • ui
        • Button.vue
        • Input.vue
      • utilities
        • clamp.ts
        • formatDate.ts

Шаг 4: Постепенное выделение модулей ​

Постепенно выделяйте модули из оставшегося кода. Начните с наиболее изолированных функциональных областей.

Пример:

До:

  • src
    • components
      • Auth
        • LoginForm.vue
        • RegisterForm.vue
    • store
      • auth.js
    • api
      • auth.js

После:

  • src
    • modules
      • Auth
        • components
          • LoginForm.vue
          • RegisterForm.vue
        • store
          • auth.js
        • api
          • auth.js
        • index.ts

Шаг 5: Создайте Global ​

Если в проекте есть глобальные определения типов, полифиллы или расширения интерфейсов, создайте уровень global.

Пример:

  • src
    • globals
      • vue-extensions.d.ts
      • polyfills.ts

Пример полной миграции ​

Рассмотрим пример миграции небольшого приложения для управления задачами (Todo App).

Исходная структура ​

  • src
    • components
      • TodoList.vue
      • TodoItem.vue
      • TodoForm.vue
      • Button.vue
      • Input.vue
    • views
      • Home.vue
      • About.vue
    • store
      • todos.js
    • router
      • index.js
    • utils
      • formatDate.ts
    • api
      • todos.js
    • App.vue
    • main.js

Структура после миграции ​

  • src
    • app
      • router.ts
      • entry.ts
      • App.vue
    • pages
      • home.vue
      • about.vue
    • modules
      • Todos
        • components
          • TodoList.vue
          • TodoItem.vue
          • TodoForm.vue
        • store
          • todos.js
        • api
          • todos.js
        • index.ts
    • common
      • ui
        • Button.vue
        • Input.vue
      • utilities
        • formatDate.ts

Точка входа main.js перенесена в app/entry.ts; index.html подключает её через <script type="module" src="/src/app/entry.ts">.

Детали миграции ​

1. Создание модуля Todos ​

ts
// modules/Todos/index.ts
export { default as TodoList } from './components/TodoList.vue'
export { useTodosStore } from './store/todos'

Публичными остаются только TodoList и useTodosStore, которые использует страница ниже. TodoItem, TodoForm и HTTP-функции остаются внутри Todos.

2. Обновление импортов ​

До:

vue
<script setup>
import TodoList from '@/components/TodoList.vue'
import { useTodosStore } from '@/store/todos'
</script>

После:

vue
<script setup>
import { TodoList, useTodosStore } from '@/modules/Todos'
</script>

3. Обновление роутера ​

До:

ts
// router/index.js
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

После:

ts
// app/router/index.ts
import Home from '@/pages/home.vue'
import About from '@/pages/about.vue'

Рекомендации по миграции ​

  1. Делайте миграцию постепенно — не пытайтесь переделать всё сразу
  2. Начните с нового функционала — применяйте FEOD к новым фичам, постепенно мигрируя старые
  3. Используйте поиск и замену — автоматизируйте обновление импортов где возможно
  4. Тестируйте после каждого шага — убедитесь, что приложение работает после каждого изменения
  5. Документируйте процесс — фиксируйте изменения для команды

Типичные проблемы при миграции ​

Циклические зависимости ​

Проблема: Модули импортируют друг друга напрямую.

Решение: Используйте IoC (Inversion of Control) для разрыва циклических зависимостей.

Слишком большие модули ​

Проблема: Модуль становится слишком большим и содержит несвязанную функциональность.

Решение: Разбейте модуль на подмодули или выделите отдельные модули.

Неясность, куда поместить сущность ​

Проблема: Непонятно, относится ли сущность к common или к модулю.

Решение:

  • Если сущность привязана к бизнес-логике → модуль
  • Если сущность универсальна и не привязана к бизнесу → common

Чеклист миграции ​