qiankun-vue3-微前端入门

webpack的一些配置：缓存，跨域

qiankun 官网

一、建应用

1.   mian主应用，至少 两个子应用
   
2.   安装qiankun依赖

   $ yarn add qiankun # 或者 npm i qiankun -S

3.   应用跑起来（子应用修改端口号）

     devServer: {
       port: 3001,
       headers: {
         'Access-Control-Allow-Origin': '*',
       },
     },

   
   

 二、微应用（子应用）配置

微应用分为有 webpack 构建和无 webpack 构建项目，有 webpack 的微应用（主要是指 Vue、React、Angular）需要做的事情有：

1. 在 src 目录新增 public-path.js：

   if (window.__POWERED_BY_QIANKUN__) {
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
   
   }

2. 导出子应用生命周期钩子
   入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围

   import './public-path';
   import { createApp } from 'vue';
   import App from './App.vue';
   
   let instance = null;
   
   
   function render(props = {}) {
     const { container } = props;
   
     instance = createApp(App);
     instance.mount(container ? container.querySelector('#app') : '#app');
   }
   
   if (!window.__POWERED_BY_QIANKUN__) {
     render();
   }
   
   export async function bootstrap() {
     console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped');
   }
   
   function storeTest(props) {
     props.onGlobalStateChange &&
       props.onGlobalStateChange(
         (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
         true,
       );
     props.setGlobalState &&
       props.setGlobalState({
         ignore: props.name,
         user: {
           name: props.name,
         },
       });
   }
   
   export async function mount(props) {
     storeTest(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;
     history.destroy();
   }

3. 打包配置修改（vue.config.js）：

const { name } = require('./package');
module.exports = {
  devServer: {
    port: 3011,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,// 官网是jsonpFunction: `webpackJsonp_${name}`
    },
  },
};

在2020-10-10发布的webpack 5中已将 output.jsonpFunction 更名为 output.chunkLoadingGlobal

三、在主应用中，注册并启动微应用

在入口文件中注册，    想要注册成功。子应用需要导出

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'App1', 
    entry: '//localhost:3011', // 刚刚设置的端口号
    container: '#App1', // 挂在地，所在主应用的元素id
    activeRule: '/app-one',
  },
  {
    name: 'App2',
    entry: '//localhost:3012',// 刚刚设置的端口号
    container: '#App2',
    activeRule: '/app-two',
  },
]);
// 启动 qiankun
start();

       app.vue中建子应用的容器   

四、主应用，子应用通信

主传输

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'App1', 
    entry: '//localhost:3000', // 刚刚设置的端口号
    container: '#App1', // 挂在地，所在主应用的元素id
    activeRule: '/app-one',
    props:{
        nickName:'我是程序1'
    }
  },
  {
    name: 'App2',
    entry: '//localhost:8080',// 刚刚设置的端口号
    container: '#App2',
    activeRule: '/app-two',
    props:{
        nickName:'我是程序2'
    }
  },
]);
// 启动 qiankun
start();

子接收,在挂载生命周期中

initGlobalState(state)

• 参数

  • state - Record<string, any> - 必选

• 用法

  定义全局状态，并返回通信方法，建议在主应用使用，微应用通过 props 获取通信方法。

onGlobalStateChange-接收

setGlobalState-传输

主应用：

import { initGlobalState, MicroAppStateActions } from 'qiankun';

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);

actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

子应用

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致
export function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态
    console.log(state, prev);
    props.setGlobalState(state);// 子应用可以修改再回传
  });


}

五、路由

npm add vue-router

main加了关于路由的配置

Github:https://github.com/bestGYH/qiankun.git