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 ファイルを参照)