Различия между вариантами проекта IO7

Внимание

Данная статья документации написана нейросетью. Возможны некоторые расхождения и неточность информации!

Обзор

IO7 предоставляет два варианта проекта-оболочки:

Параметр	Без МФ	С МФ
Репозиторий	`io7proj`	`io7mfproj`
Описание	Базовый проект	Проект с микрофронтендами

Вариант без МФ (io7proj)

Репозиторий

skv.devkdt.info/hg/io7proj

Структура фронтенда

src/
├── app/
│   └── Vue/          # Основное SPA приложение
│       ├── main.js
│       ├── App.vue
│       ├── router.js
│       ├── store.js
│       └── ...

package.json

{
    "name": "bmc-<apiname>-app",
    "description": "BMC <описание> App"
}

Особенности

Единое SPA приложение
Проще в настройке
Подходит для простых проектов

Вариант с МФ (io7mfproj)

Репозиторий

skv.devkdt.info/hg/io7mfproj

Структура фронтенда

src/
├── vue-app/              # Основное приложение (хост)
│   ├── src/
│   │   ├── main.js
│   │   ├── App.vue
│   │   ├── router.js
│   │   └── ...
├── vue-mfbrowser/        # МФ для десктопа
│   ├── src/
│   │   ├── bootstrap.js  # serviceCode = '<apiname>'
│   │   ├── pages/
│   │   │   ├── Home.vue  # Mfapp → <Apiname>
│   │   │   └── Test.vue  # Mfapp → <Apiname>
│   │   └── layouts/
│   │       └── MfLayout.vue  # Mfapp → <Apiname>
│   └── package.json      # bmc-<apiname>-mf-browser
└── vue-mfmobi/           # МФ для мобильного
    ├── src/
    │   ├── bootstrap.js  # serviceCode = '<apiname>'
    │   ├── pages/
    │   │   ├── Home.vue  # Mfapp → <Apiname>
    │   │   └── Test.vue  # Mfapp → <Apiname>
    │   └── layouts/
    │       └── MfLayout.vue  # Mfapp → <Apiname>
    └── package.json      # bmc-<apiname>-mf-mobi

package.json

vue-app:

{
    "name": "bmc-<apiname>-app",
    "description": "BMC <описание> App"
}

vue-mfbrowser:

{
    "name": "bmc-<apiname>-mf-browser",
    "description": "BMC <описание> MF Browser App"
}

vue-mfmobi:

{
    "name": "bmc-<apiname>-mf-mobi",
    "description": "BMC <описание> MF Mobi App"
}

bootstrap.js (vue-mfbrowser и vue-mfmobi)

// Было:
serviceCode = 'mfapp'

// Стало:
serviceCode = '<apiname>'

Vue компоненты (vue-mfbrowser и vue-mfmobi)

<!-- Home.vue, Test.vue, MfLayout.vue -->
<!-- Было: -->
<h1>Mfapp</h1>

<!-- Стало: -->
<h1><Apiname></h1>

Особенности

Раздельные приложения для десктопа и мобильного
Каждое МФ имеет свой package.json
serviceCode привязывается к apiname
Слово "Mfapp" заменяется на название проекта

Сравнение

Критерий	Без МФ	С МФ
Сложность настройки	Низкая	Средняя
Количество package.json	1	3
Подходит для	Простых проектов	Платформ с разными клиентами
Деплой	Единый процесс	Раздельный для каждого МФ