3. 实践基于qiankun的微前端demo - 子应用

🤖 创建子应用one

1. 创建项目，并yarn安装依赖，参考主应用，这里不赘述。
1. 注意，子应用是不安装qiankun依赖的，子应用只需要暴露对应的生命钩子即可
1. 安装vue-router，以进行子路由测试（可以不安装）

yarn add vue-router

1. 修改src/main.js

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

import routes from "./router";
import './public-path'

Vue.use(VueRouter)

Vue.config.productionTip = false

let router = null
let instance = null

function render() {
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? 'one' : '/',
    mode: 'history',
    routes
  })

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

// 生命周期 - 挂载前
export async function bootstrap(props) {
  console.log('one bootstrap');
}
// 生命周期 - 挂载后
export async function mount() {
  console.log('one mount');
  // 渲染
  render()
}
// 生命周期 - 解除挂载
export async function unmount(){
  console.log('one unmount');
}

// 本地调试
if(!window.__POWERED_BY_QIANKUN__){
  render()
}

1. 新建src/router/index.js

import Home from './../components/Home'
import About from './../components/About'


const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
    },
    {
        path: '/about',
        name: 'about',
        component: About,
    }
]

// 注意 不是导出router对象
export default routes

1. 新建src/components/About.vue

<template>
    <div class="about">
        this is one about
    </div>
</template>

<script>
    export default {
        name: "About"
    }
</script>

<style scoped></style>

1. 新建src/components/Home.vue

<template>
    <div class="home">
        this is one home
    </div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped></style>

1. 新建src/public-path.js

if(window.__POWERED_BY_QIANKUN__){
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

1. 新建vue.config.js

const {name} = require('./package')

const port = 6661

module.exports = {
    devServer: {
        port,
        // 允许被主应用跨域fetch请求到
        headers: {
            'Access-Control-Allow-Origin':'*'
        }
    },
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            // 把子应用打包成umd库格式
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`
        }
    }
}

1. 修改App.js

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1. 启动，并修改main应用，把还没有实现的two的子应用注册部分，给注释掉先。重新启动两个项目，查看3334的效果。
  
  效果如图

可以看到，页面上出现了我们的one应用的App.vue页面，和单独运行one是一样的效果，并且右边的控制台也在对应的生命钩子中打印出对应的信息，此时，one应用就成功的装载到了main里面。

🤖 创建子应用two
1. 相关文件和one几乎一致，稍微做一些修改即可，此处就不做赘述
1. 启动main、one、two后，查看效果
  
  效果如图

此时，两个微前端子项目就成功的集成到主项目main中，并且其对应的生命钩子也成功的触发。
接下来会介绍主子任务如何通讯，qiankun框架也很清楚的在文档里展现出来了，我们实践一下。
4. 实践基于qiankun的微前端demo - 主应用下发参数

最后编辑于：2020.05.19 21:05:32

3. 实践基于qiankun的微前端demo - 子应用

🤖 创建子应用one

🤖 创建子应用two