# 全局安裝vite
npm install -g vite
# 指定目錄，創(chuàng)建vite+vue3+Microapp主應(yīng)用
cd your-project-directory
vite create my-microapp --template vue-ts

# 全局安裝vue-cli
npm install -g vue-cli
# 使用vue2-cli創(chuàng)建vue2+element子應(yīng)用
vue create my-subapp

yarn add micro-app

<template>
  <div>
    <h1>Microapp - Vue3 Main</h1>
    <div style="display: flex;justify-content: space-between;">
      <div style="width: 196px;height: 800px;padding: 20px;background: #eee;">
        <router-link to="/">Home</router-link>
        <br>
        <router-link to="/about">About</router-link>
        <br>
        <div id="subapp-container"></div>
      </div>
      <router-view/>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { registerMicroApps, start } from "micro-app";
@Component({})
export default class App extends Vue {
  mounted() {
    // 注冊子應(yīng)用
    registerMicroApps([
      {
        name: "subapp1",
        entry: "http://localhost:3001",
        container: "#subapp-container",
        activePath: "/subapp",
      },
    ]);
    // 啟動微前端
    start({ mode: "history" });
  }
}
</script>

yarn add micro-app

import { registerMicroApps, start } from "micro-app";
registerMicroApps([
  // 添加一個主應(yīng)用地址，使子應(yīng)用可以選擇返回到主應(yīng)用
  {
    name: "main-app",
    entry: "http://localhost:3000",
    container: "#subapp-container",
    activePath: "/",
  },
]);
start();

cd my-microapp
yarn dev

cd my-subapp
npm run serve

cd my-microapp
yarn build
cd my-subapp
npm run build