0.6.0 • Published 4 years ago
huangyangcong-clone-qiankun-vue v0.6.0
qiankun-vue
qiankun-vue是一个基于qiankun 微前端框架的vue插件。可以让你更容易的在vue中使用。它可以实现在主应用自己的页面和子应用的页面自由跳转。 可以方便的集成到类似vue-admin-element这样的中后台框架中去。 基于微前端架构的vue插件，用于主应用。
install
yarn add qiankun-vue qiankun or npm install qiankun-vue qiankun --saveuse
main.js
const qiankunVue = new QiankunVue([
{
name: 'dashboard',
entry: '//localhost:5001',
activeRule: '/dashboard'
},
{
name: 'example',
entry: '//localhost:5002',
activeRule: '/example'
}
])
new Vue({
router,
store,
qiankunVue,
render: h => h(App)
}).$mount('#main')用于渲染子应用的页面
framework/index.vue
<template>
<div class="framework">
<qiankun
@app-mounted="afterMounted"
@app-unmounted="afterUnmounted"
@uncaught-error="error"
></qiankun>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
name: 'Framework'
})
export default class extends Vue {
afterMounted (app) {
console.log('子应用挂载结束', app)
}
afterUnmounted (app) {
console.log('子应用卸载结束', app)
}
error (err) {
console.log('app报错', err)
}
}
</script>
<style lang="scss" scoped></style>主应用路由配置
route/index.ts
const routes = [
{
path: '/dashboard*',
name: 'dashboard',
component: Framework
},
{
path: '/example*',
name: 'example',
component: Framework
},
{
path: '/about',
name: 'About',
component: () =>
import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router初始化参数
const qiankunVue = new QiankunVue([
{
name: 'dashboard', // 子应用名称
entry: '//localhost:5001', // 子应用入口请求地址
activeRule: '/dashboard' // 激活子应用的路由
}
],configuration)configuration : {
sandbox: boolean | {strictStyleIsolation: boolean} //开启沙盒，以及开启shadow dom模式
singular: boolean
...
}configuration这个配置同和qiankun 的配置相同。
注意：strictStyleIsolation: true，是采用shadow dom, 对
子应用进行样式隔离。但大多数vue项目，开发环境下style-loader会将样式提取成style，在生产环境下css会被提取，两者都会根据不同的组件切换进行动态加载。动态加载时，会将\<link>\和<style>直接加到页面根节点的\<head>标签内。
这样，由于子应用已经被shadow dom进行样式隔离了。因此，加载进入的css就不能作用到子应用上。就和qiankun中说的一样，不能无脑使用。使用strictStyleIsolation: true需要自行解决子应用的样式以及其他资源加载问题。
比如在webpack处理时，去除css动态加载，一次性将整个子应用的资源全都直接生成在index.html里进行引用。