0
156
ViewsCreación de Micro Frontend Estructural usando single-spa
Me gustaría diseñar mi frontend como un proyecto de micro frontend y me gustaría usar single-spa. El problema que tengo es:
Me gustaría crear una aplicación llamada MF1 como estructura basada, es un solicitante de reacción y tendría un encabezado, pie de página, barra lateral y un lugar vacío para el contenido principal.
Ahora, me gustaría mostrar otras aplicaciones dentro del contenido principal de MF1.
Estoy familiarizado con el motor de diseño de spa único, pero el problema es la restricción de usar un marco de interfaz de usuario dentro del proyecto de configuración raíz. Por ejemplo, la barra lateral tiene un botón para abrir y cerrar y se manejará en una aplicación React, por eso no pude usar el motor de diseño de spa único para hacer la estructura que estoy buscando o tal vez no sé cómo. .
¿Cómo puedo implementar este escenario? ¿Es single-spa una buena opción para alcanzar esta función?
Me gustaría tener algo como la imagen de abajo. encabezado, barra lateral y área de pie de página en el MF1, y en función del elemento de menú seleccionado, el proyecto de micro interfaz relacionado se representará en el área blanca.
Estaré agradecido por cualquier ayuda.
1 answers
Answer question0
Puede lograr perfectamente su objetivo con single-spa. Además de tu descripción, agregaré que puedes:
Diseñe las microfrontends dentro de la configuración raíz y agregue el diseño de cuadrícula css para tener el diseño descrito en su captura de pantalla.
para alternar la barra lateral, tiene dos opciones:
haga que el diseño de la cuadrícula responda dentro de la configuración raíz: de modo que cuando la barra lateral se colapse, el contenido del relleno principal y del encabezado crezca.
propagar un evento dentro de la barra lateral cuando alterna y hacer que los microfrontends principal y de encabezado escuchen eso incluso dentro de sí mismos para modificar su ancho.
En caso de duda, únase a nuestro canal de slack de un solo spa , como recomiendan.