vue2使用qiankundemo

很高兴为您解答关于vue2使用qiankun的问题。

首先，qiankun是一个基于single-spa的微前端解决方案，它可以帮助我们将多个独立的前端应用整合成一个整体。

下面是vue2使用qiankun的步骤：

1. 在主应用中安装qiankun：

npm install qiankun --save

2. 在子应用中安装single-spa-vue：

npm install single-spa-vue --save

3. 在主应用中注册子应用：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'child-app', // 子应用名称
    entry: '//localhost:8080', // 子应用入口
    container: '#subapp-container', // 子应用挂载的容器
    activeRule: '/child-app' // 激活子应用的路由规则
  },
]);

start();

4. 在子应用的main.js中导出Vue实例：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

let instance = null;

function render() {
  instance = new Vue({
    router,
    render: h => h(App),
  }).$mount('#app');
}

if (process.env.NODE_ENV !== 'production' && window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {}

export async function mount(props) {
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance = null;
}

5. 在子应用中导出生命周期钩子：

export const bootstrap = async () => {
  console.log('child bootstrap');
};

export const mount = async (props) => {
  console.log('child mount', props);

  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app');
};

export const unmount = async () => {
  console.log('child unmount');
};

以上就是vue2使用qiankun的简单步骤，希望能够帮助到您。