概述

micro-app 是一款用于构建微前端应用的框架，微前端的核心概念则是来源于后端开发中的微服务概念。微前端的优点可以将一个庞大的应用拆分为多个独立灵活的子应用，每个子应用都可以独立开发、独立运行、独立部署。同时，也可以将原本互不相关的应用进行整合，从而做为一个大的应用套件，提供更加完善功能。

该框架已经在一些云服务厂商中使用，如腾讯云。我们分析下这类厂商的特点，可以对微前端框架有更一步的认识。对于云服务厂商来说，其提供了上百乃至上千的产品，大多数产品都是有自己的前端页面且前端开发在各自的团队。如果说所有产品的前端页面都是由同一批开发人员进行维护，然后集成至云服务对外提供的应用中，那么这里的工作量以及维护的难度显而易见。但是如果我们将原本每个产品的前端应用，采用微前端的思想，只用有一个入口应用进行集成，各自产品的前端页面依然由原来的团队进行维护开发，可以大大降低工作量以及提升了可维护性。

本系列文章则是目的通过对 micro-app 的基本使用，从而探究其实现原理，从而在工作中更好的应用。

项目初始化

对于 micro-app 而言，应用分为两种，第一种则是原本独立运行的应用，我们称之为子应用。第二种则是基座应用，用于控制子应用之间的通信以及作为用户访问的入口应用。

首先我们需要初始化出来一个基座应用，步骤如下：

创建一个 vue 的项目

vue create micro-app-base

下载项目需要的依赖

npm install less less-loader -D

npm install vue-router@3

npm install element-ui

建立基本的布局

// App.vue

<template>

    <div id="app">

        <section class="aside">

            <p><router-link to="one">应用一</router-link></p>

            <p><router-link to="two">应用二</router-link></p>

        </section>

        <section class="main">

            <router-view></router-view>

        </section>

    </div>

</template>

<script>

export default {

    name: 'App'

}

</script>

<style lang="less">

#app {

    display: flex;

    width: 100vw;

    height: 100vh;

    .aside {

        width: 200px;

        height: 100%;

        background: #262f3e;

        a {

            color: #fff;

        }

    }

    .main {

        flex: 1;

        width: 0;

        background: #fff;

    }

}

</style>

AppOne.vue

<template>
  <div>
    <h1>子应用1</h1>
  </div>
</template>

<script>

export default {
  name: 'AppOne',
}
</script>

<style lang="less">

</style>

AppTwo.vue

<template>
  <div class="app-two">
    <h1>子应用2</h1>
  </div>
</template>

<script>
export default {
  name: 'AppTwo',
}
</script>

<style lang="less">
</style>

进行路由配置

import VueRouter from 'vue-router';

import AppOne from '../components/AppOne.vue';

import AppTwo from '../components/AppTwo.vue';

const routes = [

    { path: '/one', component: AppOne },

    { path: '/two', component: AppTwo }

];

const router = new VueRouter({

    routes

});

export default router;

启动项目

至此，我们已经初始化好了一个典型的左右布局的应用。左边则是菜单栏，右边则是每个应用要展示的区域。

快速开始

通过上述步骤，我们已经初始化了一个简单的基座应用。

接下来就进入到微应用的开发环节，开始将子应用集成至基座应用，步骤如下：

基座应用

1、安装 micro-app 依赖

npm i @micro-zoe/micro-app --save

2、在入口处引入 micro-app 并进行调用

// main.js

import microApp from '@micro-zoe/micro-app';

microApp.start();

3、在路由组件中嵌入子应用

<template>

    <div>

        <h1>子应用1</h1>
        !-- 
          name(必传)：应用名称
          url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html
          baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/one`
        -->

        <micro-app name='app1' url='http://localhost:8081/' baseroute='/one'></micro-app>

    </div>

</template>

<script>

export default {

    name: 'AppOne',

}

</script>

<style lang="less">

</style>

<template>
  <div class="app-two">
    <h1>子应用2</h1>
    <iframe src="http://localhost:8082/"/>
  </div>
</template>

<script>
export default {
  name: 'AppTwo',
}
</script>

<style lang="less">

  .app-two {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    iframe {
      flex: 1;
      height: 0;
      width: 100%;
    }
  }
</style>

子应用

对于微前端来说，每个应用都是独立开发、独立部署的，所以可以在任意目录下创建子应用。

为了演示，创建如下两个子应用。

vue create micro-app-1

vue create micro-app-2

1、设置基础路由

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

const router = new VueRouter({

    // 👇 设置基础路由，子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute，如果没有设置baseroute属性，则此值默认为空字符串

    base: window.__MICRO_APP_BASE_ROUTE__ || '/',

    // 如果子应用有自己的路由，则在下面设置即可

    routes: [],

})

Vue.config.productionTip = false

new Vue({

    router,

    render: h => h(App),

}).$mount('#app')

2、因为基座与子应用通常都是非同一个地址且端口不同，所以子应用需要在 webpack-dev-serve 的 headers 中支持跨域

devServer: {

    headers: {

        'Access-Control-Allow-Origin': '*',

    }

},

启动项目

子应用1

子应用2

基座应用

结论

可以看到，子应用不仅可以独立运行，作为单独的应用被用户访问，也可以通过基座应用访问原本独立的子应用。

这里你可能会有个疑惑，我通过 iframe 不一样可以实现这样的效果，为什么还要使用 micro-app。别急，两者的区别还需要通过对 micro-app 提供的更多功能，才能有更深一步的认识理解。

micro-app 基本使用（一）

概述

项目初始化

快速开始

基座应用

子应用

启动项目

结论