wocwin qiankun

wocwin-qiankun

efek akhir

memperkenalkan

Arsitektur aplikasi mikro front-end yang diimplementasikan berdasarkan tumpukan teknologi qiankun+vue2&vue3+Vite3+vite-plugin-qiankun mewujudkan peralihan aplikasi utama dan sub-aplikasi (karena tidak ada antarmuka panggilan, rute sub-aplikasi vue2 adalah statis, sedangkan vue3 adalah rute permintaan dinamis), Jika Anda ingin mewujudkan komunikasi antara aplikasi utama dan sub-aplikasi, Anda dapat merujuk ke blog ini dan membuat perintah skrip otomatis sederhana. Anda dapat menggunakan satu baris perintah untuk menginstal, memulai , mengemas dan menyebarkan dependensi semua sub-aplikasi.

1. Pengenalan aplikasi utama

Tumpukan teknologi Vue-cli4+Vue2+Element-Ui+qiankun

2. Pengenalan sub-aplikasi wocwin-vue2

Tumpukan teknologi Vue-cli4+Vue2+Element-Ui+qiankun

3. Pengenalan sub-aplikasi wocwin-admin

Tumpukan teknologi Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + mikro front-end (qiankun)

Operasi proyek

1. Klon proyek

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

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

2. Tergantung pada instalasi

   npm install

3. Proyek dimulai

   npm run start

4. Jalankan secara lokal

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

5. Jika masuk ke aplikasi utama dan klik untuk masuk ke sub-aplikasi (login ke aplikasi utama terlebih dahulu, lalu buka tab baru di browser untuk masuk ke setiap sub-aplikasi secara terpisah)

6. Penerapan lokal ke server memerlukan konfigurasi NG (lihat: file nginx.conf)