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

<template>
  <div><!-- id -->
    <router-link to="/">基座应用自己主页</router-link>
    <router-link to="/about">基座应用自己about</router-link>
    <router-view/>
  </div>
</template>

<style>

</style>

4、修改about.vue

<template>
  <div class="about">
    <p>基座的about</p>
    <button @click="$router.push('/about/cmsApp')">调子应用</button>
    <button @click="$router.push('/about/react')">调子应用</button>
    <!-- 子应用挂载的节点 -->
    <div id="cmsApp"></div>
    
  </div>
</template>

<script>
import {start} from 'qiankun';
export default {
  mounted() {
    console.log('sss');
    start();//在调用页面加载
  }
}
</script>

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(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    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 (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

i. 启动

npm start

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

 <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

);
}
export default App;

### i. 启动

npm start

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