wocwin qiankun

wocwin-qiankun

最終效果

介紹

基於qiankun+vue2&vue3+Vite3+vite-plugin-qiankun 技術棧實現的前端微應用架構，實現了主子應用切換（因為沒有調用接口，vue2子應用的路由都是靜態的，vue3是動態請求的路由），若想實現主子應用程式之間通訊可以參考這篇博客，並做了簡單的自動化腳本命令，可用一行命令所有子應用的依賴安裝、啟動以及打包部署。

1.主應用介紹

技術堆疊Vue-cli4+Vue2+Element-Ui+qiankun

2、wocwin-vue2 子應用介紹

技術堆疊Vue-cli4+Vue2+Element-Ui+qiankun

3、wocwin-admin 子應用介紹

技術堆疊Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端(qiankun)

專案運行

1. 項目克隆

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

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

2. 依賴安裝

   npm install

3. 專案啟動

   npm run start

4. 本地運行

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

5. 若進入主應用程式點選無法進入子應用程式（先登入主應用，在瀏覽器新開頁簽單獨進入各個子應用程式）

6. 本地部署到伺服器需要設定NG（可以參考：nginx.conf 檔案）