Пример микрофронтенда на Vue.js с использованием Single-SPA в качестве фреймворка

Журнал обновлений

• 2019.12.20: Поддержка использования manifest.json для автоматической загрузки необходимых js-файлов в дочерних проектах (необходимо повторно установить дочерние и родительский проекты).
• 2019.12.18: Дочерние проекты на Vue и React могут работать независимо в любой среде (необходимо пересобрать файлы dist).
• 2019.12.17: Решена проблема, когда при переключении между языковыми сервисами сервисы не могли быть подключены.
• 2019.12.12: Изоляция стилей, родительский проект контролирует маршрутизацию дочернего проекта (необходимо переключиться на дочерний проект Vue, затем выполнить установку npm ещё раз).
• 2019.10.27: Разделение родительского и дочерних проектов, удаленная загрузка.

Описание

Дочерние проекты находятся в папке subprojects, три проекта не связаны друг с другом и изолированы.

• Этот пример в основном объясняет простой пример микрофронтенда и как удаленно загружать модули микрофронтендов, поэтому необходимо запустить три проекта.
• Файл конфигурации single-spa находится в src/single-spa-config.js. Входные файлы проектов Vue и React имеют комментарии.
• Если вы все еще не понимаете, пожалуйста, перейдите на веб-сайт single-spa.js для получения дополнительной информации.
• https://single-spa.js.org

Шаги установки:

1. Vuejs:

- cd sub-projects/sub-app-vuejs
- yarn install / npm install / cnpm install
- npm run serve-vue

2. React:

- cd sub-projects/sub-app-react16
- yarn install / npm install / cnpm install
- npm run build
- npm run serve-react

3. Angular:

- cd sub-projects/sub-app-angular
- yarn install / npm install / cnpm install
- npm run build
- npm run serve-angular

4. vue-single-spa-back:

- yarn install / npm install / cnpm install
- npm run serve-spa

Порты:

• vuejs: 3000
• react: 3001
• angular: 3002

Личный WeChat