vue項目，使用前端微服務

1、先看最終的實現效果，主項目上的導航欄中的子項目菜單下的所有導航界面，均屬於副項目的界面

2、首先我們先新建兩個vue項目，例如一個是parent，另一個是child

3、主項目輸入命令

vue add vue-cli-plugin-qiankun --type master

4、副項目輸入命令(記住6070端口是可以自己定義的，後面需要用到這個端口號)

vue add vue-cli-plugin-qiankun --type slave --port 6070

5、父項目中，我們新建一個child界面，並且將此界面的路由設置爲動態路由，如下：

6、設置父項目的child界面

<template>
    <div class='child'>
        <div id="appContainer"></div>
    </div>
</template>

<script>
import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start } from 'qiankun'
export default {
    name: 'master',
    data () {
        return {
            apps: [
                { name: 'child', entry: process.env.NODE_ENV === 'production' ? '/child/index.html':'//localhost:6070', container: '#appContainer', activeRule: '/child'}
            ],//name:表示副項目的名稱,entry:表示副項目的開發環境路徑或生產環境路徑，container：副項目的容器節點，activeRule：激活規則
        }
    },
    created () {
        if (!window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) {
            this.initQiankun();
        } else {
            location.reload();
        }
    },
    methods: {
        initQiankun () {
            registerMicroApps(this.apps,{//導出對應的生命週期
                beforeLoad: [
                    app => {
                        //console.log('before load', app)
                    }
                ],
                beforeMount: [
                    app => {
                        //console.log('before mount', app)
                    }
                ],
                afterUnmount: [
                    app => {
                        //console.log('after unload', app)
                    }
                ]
            })
            setDefaultMountApp("/child");//設置主應用啓動後默認進入的微應用。
            runAfterFirstMounted(() => {
                //console.info('first app mounted')
            });
            start({ prefetch: true });//開始啓動
        }
    }
}
</script>

<style scoped>

</style>

7、更改主項目的vue容器節點id，可根據自身情況修改，位置爲別是index.html與app.vue

8、設置app.vue的菜單路由，如下，動態路由後的1,2,3對應副項目的路由，後面會講，暫且主項目設置完成

9、副項目的main.js設置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

let instance = null

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

  }

  if (!window.__POWERED_BY_QIANKUN__) {
    render()
  }

  export async function bootstrap () {
    // eslint-disable-next-line no-console
    //console.log('vue app bootstraped')
  }

  export async function mount (props) {
    // eslint-disable-next-line no-console
    //console.log('props from main framework', props)
    render()
  }

  export async function unmount () {
    instance.$destroy()
    instance = null
  }

10、副項目app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style lang="scss">

</style>

11、新建副項目三個界面及設置對應的路由，注意這裏的1,2,3既是對應第八步的設置

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../views/index.vue'
import index2 from '../views/index2.vue'
import index3 from '../views/index3.vue'

Vue.use(VueRouter)

const routes = [{
  path: '/1',
  name: 'index',
  component: index
},{
  path: '/2',
  name: 'index2',
  component: index2
},{
  path: '/3',
  name: 'index3',
  component: index3
}]

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

export default router

12、分別啓動兩個項目，至此我們即可實現前端微應用

13、如需擴展更多用法，可自行查閱文檔學習

1、https://github.com/F-loat/vue-cli-plugin-qiankun

2、https://qiankun.umijs.org/zh