wocwin qiankun

wocwin-qiankun

efeito final

introduzir

A arquitetura de microaplicativo front-end implementada com base na pilha de tecnologia qiankun+vue2&vue3+Vite3+vite-plugin-qiankun realiza a troca de aplicativos principais e subaplicativos (porque não há interface de chamada, as rotas dos subaplicativos vue2 são estático, enquanto vue3 é uma rota de solicitação dinâmica), se você deseja realizar a comunicação entre os aplicativos principais e subaplicativos, pode consultar este blog e fazer um comando de script automatizado simples. Você pode usar uma linha de comandos para instalar e iniciar. , empacotar e implantar as dependências de todos os subaplicativos.

1. Introdução ao aplicativo principal

Pilha de tecnologia Vue-cli4+Vue2+Element-Ui+qiankun

2. Introdução ao subaplicativo wocwin-vue2

Pilha de tecnologia Vue-cli4+Vue2+Element-Ui+qiankun

3. Introdução ao subaplicativo wocwin-admin

Pilha de tecnologia Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + micro front-end (qiankun)

Operação do projeto

1. Clone do projeto

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

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

2. Depende da instalação

   npm install

3. Início do projeto

   npm run start

4. Execute localmente

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

5. Se você entrar no aplicativo principal e clicar para entrar no subaplicativo (faça login no aplicativo principal primeiro e, em seguida, abra uma nova guia no navegador para entrar em cada subaplicativo separadamente)

6. A implantação local no servidor requer configuração NG (consulte: arquivo nginx.conf)