乾坤微前端

2022-08-21 241 阅读1分钟

主应用
1，需要在main.js配apps
1, 入口
2，激活路由
3，挂载的dom元素
4，组件名
5,传递给子组件的属性
```
let apps={
```
```
 entry:"",
```
```
 name:'',
```
```
 activeRule:"",
```
```
 container:'#vue',
```
```
 props:''
```
}
2，需要在main.js注册一下
registerMicropApps(apps)
3, 需要在main.js启动
start()
3，需要在app.vue里写入口
子应用
1，在子应用main.js要配全局路径
if(window.POWERED_BY_QIANKUN){ // 如果是qiankun使用到了，则会动态注入路径

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; }

5，在子应用main.js里判断是不是独立运行
let instance = null;
function render(props) {
instance =
new Vue({
router, render: h => h(App)
}).$mount('#app')
}
if (!window.POWERED_BY_QIANKUN) { // 如果是独立运行，则手动调用渲染 render();
}
6，在子应用main.js里导出钩子
function bootstrap(props) { };
export async function mount(props) { render(props); };
export async function unmount(props) { instance.$destroy(); };
7，在子应用vue.config.js里配置
module.exports = {
devServer: {
port: 10000, headers:{ 'Access-Control-Allow-Origin': '*' // 允许跨域 } },
8，在子应用vue.config.js打包配置
configureWebpack: {
output: {
```
  library: 'vueApp', 
```
```
  libraryTarget: 'umd' 
```
```
  } 
```
}
};
9，乾坤微前端的好处
1，js 沙箱隔离，css 隔离，可以嵌入多种技术栈，独立开发，独立部署，不影响