Index - Qiankun — ContextQMD

📦 Installation

::: code-group

bash

npm install qiankun

bash

yarn add qiankun

bash

pnpm add qiankun

:::

🔨 Quick Start

Main Application

typescript

import { registerMicroApps, start } from 'qiankun';

// register micro apps
registerMicroApps([
  {
    name: 'reactApp',
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vueApp',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

// start qiankun
start();

Micro Application

typescript

/**
 * bootstrap will only be called once when the micro application is initialized
 * mount will be called every time the micro application enters
 * unmount will be called every time the micro application leaves
 */
export async function bootstrap() {
  console.log('react app bootstraped');
}

export async function mount(props) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

🌟 Why qiankun?

<div class="features-grid"> <div class="feature-card"> <h3>🎯 Zero Intrusion</h3> <p>Almost no intrusion to existing applications, only need to expose necessary lifecycle functions</p> </div> <div class="feature-card"> <h3>📱 All Scenarios</h3> <p>Supports both route-based and manual loading of micro applications</p> </div> <div class="feature-card"> <h3>🔒 Secure Isolation</h3> <p>Complete sandbox solution with JS isolation and CSS isolation</p> </div> <div class="feature-card"> <h3>⚡ High Performance</h3> <p>Supports preloading, caching and other performance optimization solutions</p> </div> </div>

👥 Community

GitHub Discussions	DingTalk Group	WeChat Group
qiankun discussions		view group QR code