client-wms-board/src/main.js

import './public-path.js';

import { createApp } from 'vue/dist/vue.esm-bundler.js';
import Antd from 'ant-design-vue';
import App from './App.vue';
import { createRouter, createWebHashHistory } from 'vue-router';

import * as PcComponentV3 from 'pc-component-v3';
import 'pc-component-v3/dist/pc-component-v3.css';
import 'ant-design-vue/dist/reset.css';
import './assets/main.css';
import routes from './router/routes.js';
import $ from 'jquery';

window.$ = $;
window.jQuery = $;
window.PcComponentV3 = PcComponentV3;


let instance = null;
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
});

function render(props = {}) {
    const { container } = props;
  
    instance = createApp(App);
    instance.use(Antd);
    instance.use(PcComponentV3);
    instance.use(router);
    instance.mount(container ? container.querySelector('#app') : '#app');
}
  
  
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}
  
/**
   * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
   * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
   */
export async function bootstrap() {
    console.log('[client-role-v3] bootstraped');
}
  
/**
   * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
   */
export async function mount(props) {
    console.log('[client-role-v3] props from main framework', props);
   
    render(props);
    instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
    instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}
  
/**
   * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
   */
export async function unmount() {
    instance.unmount();
    instance._container.innerHTML = '';
    instance = null;
}