2. 实践基于qiankun的微前端demo - 主项目

开始

创建主应用

• 1. 创建vue主应用main

vue create main

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

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

• 3. 安装qiankun依赖

yarn add qiankun

• 4. 进入 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()

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

• 6. 修改src/App.vue内容如下

• 7. 增加vue.config.js，自定义我们主应用的启动端口为3334

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

• 8. 运行项目

     
     
     出现错误

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