wocwin qiankun

wocwin-qiankun

efecto final

introducir

La arquitectura de microaplicaciones front-end implementada en base a la pila de tecnología qiankun + vue2 & vue3 + Vite3 + vite-plugin-qiankun realiza el cambio de aplicaciones principales y secundarias (debido a que no hay una interfaz de llamada, las rutas de las subaplicaciones vue2 son estático, mientras que vue3 es una ruta de solicitud dinámica), si desea realizar la comunicación entre las aplicaciones principales y secundarias, puede consultar este blog y crear un comando de script automatizado simple. Puede usar una línea de comandos para instalar e iniciar. , empaquetar e implementar las dependencias de todas las subaplicaciones.

1. Introducción a la aplicación principal.

Pila de tecnología Vue-cli4 + Vue2 + Element-Ui + qiankun

2. Introducción a la subaplicación wocwin-vue2

Pila de tecnología Vue-cli4 + Vue2 + Element-Ui + qiankun

3. Introducción a la subaplicación wocwin-admin

Pila de tecnología Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + micro front-end (qiankun)

Operación del proyecto

1. Clon del proyecto

 // GitHub
git clone https: //github.com/wocwin/wocwin-qiankun.git

 // Gitee
git clone https: //gitee.com/wocwin/wocwin-qiankun.git

2. Depende de la instalación

   npm install

3. Inicio del proyecto

   npm run start

4. Ejecutar localmente

 // 1、运行完 npm run start
// 2、打开http://localhost:8100/ 进入主应用
// 3、逐个进入子应用（点击子应用左侧菜单栏logo可以回到主应用）
// 4、主应用的系统管理是所有应用的公共模板（用户、角色、菜单、部门、微前端、字典等）

5. Si ingresa a la aplicación principal y hace clic para ingresar a la aplicación secundaria (primero inicie sesión en la aplicación principal, luego abra una nueva pestaña en el navegador para ingresar a cada aplicación secundaria por separado)

6. La implementación local en el servidor requiere configuración NG (consulte: archivo nginx.conf)