一、首先创建一个base_app项目,下面简称为基应用

vue create base_app

在创建一个A应用

vue create a_app

在创建一个B应用

vue create b_app

二、在vue.config.js中分别指定基应用、A应用、B应用端口

//micro_app
  devServer: {
    host: 'localhost'
    , port: 3000
  }
  
//a_app
  devServer: {
    host: 'localhost'
    , port: 3001，
        //添加跨域配置
        headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
  
//b_app
  devServer: {
    host: 'localhost'
    , port: 3002,
    //添加跨域配置
        headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
  现在我们简化一下三个项目中的app.vue内容，先注释HelloWorld组件

在对应的app.vue中修改A应用，B应用标识A应用B应用

三、在基应用中安装micro app依赖

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

2、初始化基应用
在基应用的main.js中添加

// index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

在基应用的app.vue中添加micro-app组件,并指定名称和url
启动三个项目基应用、A应用、B应用，现在我们就可以看到效果了imagebae-app示例代码a-app示例代码