wocwin qiankun

wocwin-qiankun

final effect

introduce

The front-end micro-application architecture implemented based on the qiankun+vue2&vue3+Vite3+vite-plugin-qiankun technology stack realizes the switching of main and sub-applications (because there is no calling interface, the routes of vue2 sub-applications are static, while vue3 is a dynamic request route), If you want to realize communication between the main and sub-applications, you can refer to this blog and make a simple automated script command. You can use one line of commands to install, start, package and deploy the dependencies of all sub-applications.

1. Introduction to the main application

Technology stack Vue-cli4+Vue2+Element-Ui+qiankun

2. Introduction to wocwin-vue2 sub-application

Technology stack Vue-cli4+Vue2+Element-Ui+qiankun

3. Introduction to wocwin-admin sub-application

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

Project operation

1. Project clone

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

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

2. Depends on installation

   npm install

3. Project start

   npm run start

4. Run locally

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

5. If you enter the main application and click to enter the sub-application (log in to the main application first, then open a new tab in the browser to enter each sub-application separately)

6. Local deployment to the server requires NG configuration (refer to: nginx.conf file)