微前端(qiankun)

最近看到好多人都开始搞微前端啦，我也来玩儿一玩儿，大概看了一下，其实挺简单的，至少比我当初从mvc转mvvm要简单的多的多，好啦，废话不多说，直接开始。

看官网上面说，qiankun在vue3.0方面还是不是那么成熟，那么咱们创建vue的时候就先采用vue2.0+咯

先创建两个项目，一个主项目(qiankun-main)、一个子项目(qiankun-sub),咱们都采用vue了哈 

vue create qiankun-main

vue create qiankun-sub



接下来两个项目都要去下载qiankun这个包咯


cnpm i qiankun -S

准备工作做好啦。那咱们就开始正式进入qiankun的项目搭建啦

在主项目下面咱们可以新建一个文件，用来放置多个子应用的配置
const microQiankun = [
    {
        name:"sub-vue", //每个字应用都有一个唯一的name,不可重复
        entry:"//localhost:8090",
        container:"#subapp-viewpor", //字应用挂在的id,在app.vue中定义
        activeRule:"/subVue",
        props:{
            routerBase:"/我是从主应用传递过来的"
        }
    }
]
export default microQiankun;

然后咱们在主项目的main.js中，去引入，并且配置qiankun的相关配置咯

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

// registerMicroApps 注册子应用
// setDefaultMountApp 默认启动后进入的字应用
// start 启动乾坤
// initGlobalState 设置全局变量
import { registerMicroApps, start } from 'qiankun';
import microQiankun from './microQiankun';
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')
//注册子应用
registerMicroApps(microQiankun,{
    beforeLoad:app=>{ //加载子路由的生命周期
      console.log(app.name);
    },
    beforeMount:[
        app =>{
          console.log(app.name);
        }
    ],
    afterMount:[
      app => {
        console.log(app.name);
      }
    ],
    afterUnmount:[
      app =>{
        console.log(app.name);
      }
    ]

});  
start();  //启动qiankun

当然，咱们在路由里面还要有点注意的哦

import Vue from 'vue'
import Router from 'vue-router';
Vue.use(Router)
const router = new Router({
    mode:"history",    //history模式
    router:[],
    base:""    //这个是不需要路径的
})
export default router

 ----------------------------------到此为止，咱们主项目的配置就可以先告一段落啦----------------------------

现在开始子项目的配置啦 ，比主项目可能要麻烦那么一丢丢哈，开始子项目配置啦

大概分为四步

1、在 src 目录新增 public-path.js：

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 这一块如果报错的话 需要在package.json中的eslintConfig中添加
/***
 * "globals": {
      "__webpack_public_path__": true
    },
 */




2、路由配置：

import Vue from 'vue'
import Router from 'vue-router';
import test from '../components/test'
Vue.use(Router)
const router = new Router({
    mode:"history",
    base:"/subVue",    //这个是必须要加的哦，用来匹配主项目中配置的activeRule
    routes: [
        {
            path: '/',
            component:test,    //记得自己新建模块哈
            
        },
    ]
})
export default router





3、打包配置修改（vue.config.js）：

const { name } = require('./package');
module.exports = {
    devServer:{
        port:"8090",    //端口号对应的主项目中配置的entry 中的端口号
        headers: {  //这个是必须要写的
            'Access-Control-Allow-Origin': '*',
        },
        injectClient: false
    },
    configureWebpack: {
        output: {
          library: `${name}-[name]`,
          libraryTarget: 'umd', // 把微应用打包成 umd 库格式
          jsonpFunction: `webpackJsonp_${name}`,
        },
    },
}






4、入口文件 main.js 修改

import "./public-path"
import Vue from 'vue'
import App from './App.vue'
import router from  './router'
Vue.config.productionTip = false
let instance = null;
// 独立运行时
function render() {
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount('#qiankunApp'); //避免id重复哦
}
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

-------------到这儿咱们的子项目也就配置完成咯，那么接下来试一下辛苦了这么就的效果吧-----------

接下来开始测试咯

在主项目中的App.vue中写入
<div id="app">
    <router-link to="/subVue">跳转至另一个项目</router-link>
    <router-link to="/mainVue">跳转至本项目中的路由</router-link>
    <!-- subapp-viewpor就是 microQiankun中子项目配置中container对应的id   这个是对应的子项目渲染，非子项目还是原先的写法-->
      <div id="subapp-viewpor"></div>
      <!-- 这个只是一个简单的小的测试例子  实际项目中咱们主项目也是有路由的 那么咱们主项目改怎么写还是怎么写哦 -->
      <router-view></router-view>
 </div>

到此为止、微前端(qiankun) 就结束咯 当然里面还有一些api。大家入个门 看起来就没有那么麻烦啦