wocwin qiankun

wocwin-qiankun

endgültige Wirkung

einführen

Die auf dem Qiankun+vue2&vue3+Vite3+vite-plugin-qiankun-Technologiestapel implementierte Front-End-Mikroanwendungsarchitektur realisiert den Wechsel zwischen Haupt- und Unteranwendungen (da keine Aufrufschnittstelle vorhanden ist, sind die Routen der Vue2-Unteranwendungen vorhanden). statisch, während vue3 eine dynamische Anforderungsroute ist. Wenn Sie die Kommunikation zwischen der Haupt- und Unteranwendung realisieren möchten, können Sie auf diesen Blog verweisen und einen einfachen automatisierten Skriptbefehl erstellen. Sie können eine Befehlszeile zum Installieren und Starten verwenden , verpacken und stellen Sie die Abhängigkeiten aller Unteranwendungen bereit.

1. Einführung in die Hauptanwendung

Technologie-Stack Vue-cli4+Vue2+Element-Ui+qiankun

2. Einführung in die Unteranwendung wocwin-vue2

Technologie-Stack Vue-cli4+Vue2+Element-Ui+qiankun

3. Einführung in die Unteranwendung wocwin-admin

Technologie-Stack Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + Micro-Frontend (Qiankun)

Projektbetrieb

1. Projektklon

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

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

2. Hängt von der Installation ab

   npm install

3. Projektstart

   npm run start

4. Lokal ausführen

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

5. Wenn Sie die Hauptanwendung aufrufen und auf klicken, um die Unteranwendung aufzurufen (melden Sie sich zuerst bei der Hauptanwendung an und öffnen Sie dann eine neue Registerkarte im Browser, um jede Unteranwendung separat aufzurufen).

6. Die lokale Bereitstellung auf dem Server erfordert eine NG-Konfiguration (siehe: Datei nginx.conf).