微前端micro-app快熟入门示例

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

vue create base_app

在创建一个A应用

vue create a_app

在创建一个B应用

vue create b_app

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

//base_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应用标识

<span>A应用</span>
<span>B应用</span>

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

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

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

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

microApp.start()

在基应用的app.vue中添加micro-app组件,并指定名称和url

      <micro-app name='a-app' url='http://localhost:3001/'></micro-app>
      <micro-app name='b-app' url='http://localhost:3002/'></micro-app>

启动三个项目基应用、A应用、B应用，现在我们就可以看到效果了

bae-app示例代码
a-app示例代码