wocwin qiankun

wocwin-qiankun

effet final

introduire

L'architecture de micro-application frontale implémentée sur la base de la pile technologique qiankun+vue2&vue3+Vite3+vite-plugin-qiankun réalise la commutation des applications principales et des sous-applications (car il n'y a pas d'interface d'appel, les routes des sous-applications vue2 sont statique, alors que vue3 est une route de requête dynamique), Si vous souhaitez réaliser une communication entre l'application principale et les sous-applications, vous pouvez vous référer à ce blog et créer une simple commande de script automatisée. Vous pouvez utiliser une ligne de commandes pour installer, démarrer. , empaquetez et déployez les dépendances de toutes les sous-applications.

1. Introduction à l'application principale

Pile technologique Vue-cli4+Vue2+Element-Ui+qiankun

2. Introduction à la sous-application wocwin-vue2

Pile technologique Vue-cli4+Vue2+Element-Ui+qiankun

3. Introduction à la sous-application wocwin-admin

Pile technologique Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + micro front-end (qiankun)

Exploitation du projet

1. Clonage du projet

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

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

2. Dépend de l'installation

   npm install

3. Début du projet

   npm run start

4. Exécuter localement

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

5. Si vous entrez dans l'application principale et cliquez pour accéder à la sous-application (connectez-vous d'abord à l'application principale, puis ouvrez un nouvel onglet dans le navigateur pour accéder à chaque sous-application séparément)

6. Le déploiement local sur le serveur nécessite une configuration NG (voir : fichier nginx.conf)