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><aclassName="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按照如上修改即可

 <aclassName="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按照如上修改即可