micro-app【微前端系列教程】项目搭建

micro-app 官方文档
https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite
以主应用 vue3 + vite ，子应用 vue3+vite 为例
   子应用

  无需任何修改，直接启动子应用即可。

   主应用

  1. 安装微前端框架 microApp

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

复制代码

2. 导入并启用微前端框架 microApp

src/main.ts

1. import microApp from '@micro-zoe/micro-app'
3. microApp.start()

复制代码

3. 添加设置

vite.config.ts 的 vue 中添加设置

1.     vue({
2.       template: {
3.         compilerOptions: {
4.           isCustomElement: (tag) => /^micro-app/.test(tag)
5.         }
6.       }
7.     }),

复制代码

4. 页面引入子应用

1. <micro-app name="childApp1" url="http://127.0.0.1:5174/" iframe></micro-app>

复制代码

• name：必传参数，必须以字母开头，且不可以带特别符号(中划线、下划线除外)
  
• url：必传参数，必须指向子应用的 index.html
  
• 子应用为 vite 时，需添加 iframe
  

5. 启动主应用

终极效果如下