3. 實踐基于qiankun的微前端demo - 子應(yīng)用

?? 創(chuàng)建子應(yīng)用one

1. 創(chuàng)建項目扇商，并yarn安裝依賴，參考主應(yīng)用案铺，這里不贅述。
1. 注意坝茎，子應(yīng)用是不安裝qiankun依賴的，子應(yīng)用只需要暴露對應(yīng)的生命鉤子即可
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');
}

// 本地調(diào)試
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,
        // 允許被主應(yīng)用跨域fetch請求到
        headers: {
            'Access-Control-Allow-Origin':'*'
        }
    },
    configureWebpack: {
        output: {
            library: `${name}-[name]`,
            // 把子應(yīng)用打包成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應(yīng)用岳服，把還沒有實現(xiàn)的two的子應(yīng)用注冊部分希俩，給注釋掉先。重新啟動兩個項目颜武，查看3334的效果。
  
  效果如圖

可以看到这吻，頁面上出現(xiàn)了我們的one應(yīng)用的App.vue頁面篙议，和單獨運行one是一樣的效果，并且右邊的控制臺也在對應(yīng)的生命鉤子中打印出對應(yīng)的信息移怯，此時，one應(yīng)用就成功的裝載到了main里面舟误。

?? 創(chuàng)建子應(yīng)用two
1. 相關(guān)文件和one幾乎一致雁佳，稍微做一些修改即可，此處就不做贅述
1. 啟動main糖权、one、two后疚顷，查看效果
  
  效果如圖

此時，兩個微前端子項目就成功的集成到主項目main中阀坏，并且其對應(yīng)的生命鉤子也成功的觸發(fā)笆檀。
接下來會介紹主子任務(wù)如何通訊忌堂，qiankun框架也很清楚的在文檔里展現(xiàn)出來了，我們實踐一下士修。
4. 實踐基于qiankun的微前端demo - 主應(yīng)用下發(fā)參數(shù)

最后編輯于：2020.05.19 21:05:32

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

3. 實踐基于qiankun的微前端demo - 子應(yīng)用

?? 創(chuàng)建子應(yīng)用one

?? 創(chuàng)建子應(yīng)用two