qiankun--微前端可用小demo（主应用vue+子应用vue+子应用react）

qiankun–微前端可用小demo（主应用vue+子应用vue+子应用react）

说明：

在主应用的about页面加载子应用

成果：

加载子应用1，点击第一个按钮

子应用2，点击第二个按钮

注意：如果已经渲染一个子应用，切换另一个子应用的时候先返回about页面（自动清理上一个子应用），再点击切换按钮

代码：

主应用（vue实现）

1、初始化

使用vue-cli新建vue2项目（带router）

vue create base

安装qiankun

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

2、修改main.js

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

//引入qiankun--备份
import {registerMicroApps} from 'qiankun';
//注册app列表
const apps = [
  {
    name: 'vueApp',
    entry: '//localhost:9999',//自动加载，解析js,动态执行，需解决跨域
    container: '#cmsApp',//子应用挂载元素
    activeRule: '/about/cmsApp',//激活规则，访问该规则时，挂载
    props: {
      a: 1
    }
  },
  {
    name: 'reactapp',
    entry: '//localhost:20000',//自动加载，解析js,动态执行，需解决跨域
    container: '#cmsApp',
    activeRule: '/about/react'
  }
]
registerMicroApps(apps);//可以按需设置生命周期方法

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

3、修改APP.vue

4、修改about.vue

5、启动

npm run serve

子应用（vue实现）

1、初始化

使用vue-cli新建vue2项目（带router）

vue create app1

2、修改main.js

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

let instance = null;
function render() {
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount('#app')//还是渲染到自己的html里，基座会把该html挂载
};

if (!window.__POWERED_BY_QIANKUN__) {//默认独立运行
  render();
}
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
export async function bootstrap(props){};

export async function mount(props){
  console.log(props)
  render()
};
export async function unmount(props){
  instance.$destroy()
};

3、新建vue.config.js(子应用项目根目录)

module.exports = {

    devServer: {
        port:9999,
        headers:{
            'Access-Control-Allow-Origin':'*'
        }
    },
    configureWebpack:{
        output:{
            library:'vueApp',
            libraryTarget:'umd'
        }
    }
}

4、启动

npm run serve

子应用（react实现）

a. 创建react应用

npx create-react-app my-app

b. 安装yarn

npm install -g yarn

c. 安装react-app-rewired

yarn add react-app-rewired

d. 安装react-router-dom

yarn add react-router-dom

e. 创建config-overrides.js（子应用项目根目录）

配置应用启动、打包和跨域参数

config-overrides.js

module.exports = {
    webpack:(config)=>{
        config.output.library = 'reactApp';
        config.output.libraryTarget = 'umd';
        config.output.publicPath = 'http://localhost:20000/';
        return config;
    },
    devServer:(configFunction)=>{
        return function(proxy,allowedHost){
            const config = configFunction(proxy,allowedHost);
            config.headers = {
                'Access-Control-Allow-Origin':'*'
            }
            return config;
        }
    }
}

f. 修改package.json

...
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  ...

g. 修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
function render(){
  ReactDOM.render(
    
      
    ,
    document.getElementById('root')
  );
};

if(!Window.__POWERED_BY_QIANKUN__){
  render()
}
export async function bootstrap(props){};

export async function mount(props){
  render()
};
export async function unmount(props){
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
};

h. 修改app.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    

      

        
        

          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}
export default App;

i. 启动

npm start

创建react项目失败，可自行百度，index.js按照如上修改即可

 
      Learn React
    
  

);
}
export default App;

### i. 启动

npm start

创建react项目失败，可自行百度，index.js按照如上修改即可