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 파일 참조).