antd4+ts+vue3乾坤子应用引入

antd4+ts+vue3乾坤子应用

安装vite-plugin-qiankun

npm install --save vite-plugin-qiankun

import { createPinia } from 'pinia'; // 创建大仓库
import { createApp } from 'vue'; // 引入实例化上下文的api方法createApp
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'; // 乾坤
import type { App } from 'vue';
import Root from './App.vue';
import { setupI18n } from './locales';
import {
  setupAccessDirective,
  setupLoadingDirective,
} from './directive';
import router from '~/router';
import '~/router/router-guard';
import 'ant-design-vue/dist/reset.css';
import '~/assets/styles/reset.css';
import 'uno.css';

function setupDirective(app: App) {
  // 注册loading自定义指令
  setupLoadingDirective(app)
  setupAccessDirective(app)
}

const store = createPinia(); // createPinia方法可以用于创建大仓库 

// 启动项目
let app: App | null;
async function start(props: any = {}) {
  const { container } = props;

  app = createApp(Root); // 创建app

  app.use(store); // 加载store

  await setupI18n(app)
  setupDirective(app)
  app.use(router); // 加载路由
  app.mount(container ? container.querySelector('#appChild_config-admin') : '#appChild_config-admin'); // 挂载
  app.config.performance = true
}

console.log('----乾坤---', qiankunWindow.__POWERED_BY_QIANKUN__);
if (!qiankunWindow.__POWERED_BY_QIANKUN__) { // 独立运行
  start();
} else { // 非独立运行
  renderWithQiankun({
    // 子应用挂载
    mount(props) {
      console.log('配置管理子应用 挂载');
      start(props);
    },
    // 只有子应用第一次加载会触发
    bootstrap() {},
    // 更新
    update(props) {
      console.log('update props', props);
    },
    // 卸载
    unmount() {
      console.log('配置管理子应用 卸载');
      app?.unmount();
      // app.$el.innerHTML = '';
      app = null;
    }
  });
}