# micro-app

**Repository Path**: zls0910/micro-app

## Basic Information

- **Project Name**: micro-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-16
- **Last Updated**: 2022-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# micro-app 微前端测试

-- micro-app 官网：https://micro-zoe.github.io/micro-app/docs.html#/  
-- 案例大概：在 vue3 项目中集成两个项目子项目（vue2、vue3）

# 启动

-- 三个项分别使用 npm i 下载依赖, 再分别使用 npm run dev 启动项目。在【vue3-pc-basic】项目中测试即可

# 路由设置

-- 基座设置 history 模式，子应用设置 hash 模式（必须这样设置，可以忽略很多问题！！！）

# 数据通信

-- 对于数据不间断变化的建议使用监听函数形式，仅使用一次的用直接获取方式（发送数据过程中建议给个唯一标识，防止数据混乱）

# 样式隔离问题

-- micro-app 的基座与子应用并不是完全的样式隔离，在开发过程中会出现基座样式覆盖子应用的情况！我们有以下两种解决方案：  
-- 1）开启 shadowDOM（shadowDOM 具有更强的样式隔离能力，开启后，<micro-app>标签会成为一个真正的 WebComponent。但 shadowDOM 在 React 框架及一些 UI 库中的兼容不是很好，经常会出现一些不可预料的问题，除非你很清楚它会带来的问题并有信心解决，否则不建议使用。）  
-- 2）使基座与子应用的组件最外层类名尽量不同！  
-- 因时间成本问题，建议开发人员先尝试第一种方案，若不可行再使用第二种方案！！！！