创建主应用

1. 创建vue主应用main

vue create main

1. cd main 执行 yarn 安装依赖，并本地启动 yarn serve(或者修改为yarn dev)

cd main
yarn
yarn serve (或者修改为yarn dev)

1. 安装qiankun依赖

yarn add qiankun

1. 进入 src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 导入qiankun所需方法
import {
    registerMicroApps, // 注册子应用
    runAfterFirstMounted, // 当地一个子应用装载完毕
    setDefaultMountApp, // 设置默认装载的子应用
    initGlobalState, // 微前端之间的通信
    start, // 启动
} from 'qiankun'

// 渲染主应用
new Vue({
    render: function (h) { return h(App) },
}).$mount('#container')

// 注册子应用
registerMicroApps([
        {
            name: 'one',
            entry: '//localhost:6661',
            container: '#micro-view',
            activeRule: '/one',
        },
        {
            name: 'two',
            entry: '//localhost:6662',
            container: '#micro-view',
            activeRule: '/two',
        },
    ],
    {
        beforeLoad: [
            app => {
                console.log('beforeLoad');
            }
        ],
        beforeMount: [
            app => {
                console.log('beforeMount');
            }
        ],
        beforeUnmount: [
            app => {
                console.log('beforeUnmount');
            }
        ],
        afterUnmount: [
            app => {
                console.log('afterUnmount');
            }
        ]
    })

setDefaultMountApp('one')

// 第一个子应用加载完毕后回调
runAfterFirstMounted(()=>{
  console.log('第一个子应用加载完毕后的回调');
})

// 启动qiankun
start()

1. 修改 public/index.html内的id为container

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="container"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1. 修改src/App.vue内容如下

<template>
  <div id="main">
    这是主应用文字
    <br>
    <button @click="changeView('/one')">子应用one</button>
    &nbsp;
    <button @click="changeView('/two')">子应用two</button>
    <hr>
    <!--这里的 micro-view 对应的是上面 main.js 里面的子应用配置的 container: '#micro-view' -->
    <div id="micro-view"></div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    changeView(who){
      window.history.pushState(null, who, who)
    },
  }
}
</script>

<style>
#main {
  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. 增加vue.config.js，自定义我们主应用的启动端口为3334

module.exports = {
    devServer: {
        port: 3334
    }
}

1. 运行项目
  
  出现错误

此时，出现错误是正常的，因为我们还没有启动我们的子应用，不对，是我们连子应用都没搞呢，接下来，我们搞一下子应用one。
3. 实践基于qiankun的微前端demo - 子应用e

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