Creación de un proyecto de microaplicación basado en Vue3+TS+ElementPlus+Qiankun

Hola a todos, mi nombre es An Yin.

Recientemente, planeo reconstruir un pequeño proyecto (sistema de pedido de programas pequeños) en un modelo de microservicio + microaplicación, y planeo usar Vue3 + TS + ElementPlus + Qiankun como pila de tecnología front-end. A continuación se muestra una transcripción de mi proceso de creación de una microaplicación básica.

El proyecto refactorizado se puede encontrar aquí:

?Backend: Anyin Cloud [1]

?Frontend Basics: Anyin Cloud Parent [2 ]

?Microaplicación front-end: Anyin Cloud Base[3]

Ok, veamos cómo construir nuestro proyecto de microaplicación basado en Vue3+TS+ElementPlus+Qiankun.

Por cierto, la razón por la que no usamos Vite para construir aquí es porque Vite actualmente está experimentando algunos problemas al crear aplicaciones junto con Qiankun, por lo que Vite ya no se usa aquí.

Primero, creamos un proyecto principal usando vue-cli:

A continuación, seleccionamos manualmente los componentes a agregar:

Seleccionamos los siguientes componentes para construir Aplicación, use la barra espaciadora para realizar varias selecciones y luego presione Entrar:

Seleccione la versión de vue3.x

Estilos de código relacionados, enrutamiento Usamos el estilo de código predeterminado, el modo de enrutamiento y menos compilación de CSS:

Usamos ESLint + Airbnb Config para las especificaciones de codificación:

Finalmente, el conjunto completo de opciones es el siguiente:

vue-cli creado por nosotros Después del proyecto, ingresamos al proyecto y vemos el directorio del proyecto de la siguiente manera:

Primero. La aplicación principal de Qiankun necesita instalar dependencias, mientras que la microaplicación no necesita instalar dependencias, solo modifica la configuración. Aquí, primero instalamos las dependencias en la aplicación principal

A continuación, configuramos la microaplicación. Agregamos un nuevo app.ts para registrar todas las entradas de la micro aplicación:

Luego, registramos la micro aplicación y exportamos el método de inicio

Después de exportar el método de inicio, necesita hacer clic para ejecutar este método

Para toda la interfaz, queremos que el diseño general se vea así:

Por lo tanto, después de instalar ElementPlus, debemos crear dicho diseño.

Primero, instale ElementPlus

Luego, introduzca el componente ElementPlus en main.ts, como se muestra a continuación:

A continuación, cree un componente de diseño Layout.vue, Como se muestra a continuación:

Finalmente, registre el componente en App.vue

Al ejecutar el componente, se mostrará el siguiente contenido.

Los proyectos de inicialización de la microaplicación son los mismos que los de la aplicación principal, por lo que no entraremos en detalles aquí.

Las microaplicaciones no necesitan depender de Qiankun, por lo que aquí solo necesitamos realizar algunas configuraciones.

Añadir un nuevo archivo public-path.js en el directorio src con el siguiente contenido:

Introducir el archivo en main.ts

Añadir una nueva ruta archivo de configuración, donde crearemos la información de enrutamiento correspondiente, que es compatible con la ejecución independiente, de la siguiente manera:

A continuación, cambie el código en main.ts sobre la creación de instancias de la siguiente manera:

Cambie el código de creación de instancias en main.ts para que sea el mismo que main.ts.

Aquí definimos un método de renderizado y exponemos la instancia de Vue, ya que esta instancia se usará más adelante en un gancho en el ciclo de vida de la microaplicación.

Para microaplicaciones, también es necesario exponer el método de enlace del ciclo de vida para que la aplicación principal pueda reconocerlo. Agregue el siguiente método a main.ts:

La creación de un proyecto con vue no viene con un archivo vue.config.js, así que creemos uno manualmente y lo configuraremos con el siguiente código:

?Aquí importamos el campo de nombre de package.json porque debe ser el mismo que el campo de nombre del archivo app.ts configurado en los encabezados de la aplicación principal y agrega la configuración entre dominios porque la aplicación principal pasa; el método de recuperación de La microaplicación obtiene recursos y la microaplicación se inicia en un puerto diferente, por lo que necesitamos agregar una configuración entre dominios para configurar el formato de empaquetado de la microaplicación para que la aplicación principal pueda identificar correctamente ciertas configuraciones; de la microaplicación

¿Recuerdas nuestro cuadro a continuación?

Creo que el encabezado pertenece a la aplicación principal, y el lado y el principal debajo pertenecen a la microaplicación. Los bloques aparte se utilizan a menudo para mostrar menús y, personalmente, creo que las microaplicaciones deberían mantener sus propios menús en lugar de dejarlos en manos de la aplicación principal.

Entonces, en la microaplicación, también debemos manejar el diseño del menú de la izquierda.

Hemos agregado un nuevo archivo de diseño Layout.vue

En este punto, hemos completado la arquitectura básica de Vue3+TS+ElementPlus+Qiankun para construir un proyecto de microaplicación. Ejecutémoslo en su conjunto. Echemos un vistazo al efecto:

Inicio

Microaplicación

Bien, sobre esta base, los conceptos básicos de la microaplicación. proyecto basado en Vue3 + TS + ElementPlus + Qiankun El marco se ha configurado y poco a poco estamos completando algunas herramientas y páginas.

Código fuente relevante:

?Aplicación principal: Anyin Cloud Parents

?Micro cliente: Anyin Cloud Base

[1] Anyin Nube: /anyin/anyin-cloud

[2] Anyin Cloud Parent: /anyin/anyin-cloud-parent

[3] Anyin Cloud Base: /anyin/anyin-cloud -base