Web Component
w3c提出浏览器原生支持的组件规范 通过扩展HTMLElement定义html标签 嵌入内容和逻辑(shadow dom隔离)
- 接入简单不需要子应用改造
- 不支持ie
- Web Component沙箱隔离 性能较好
集成
1 | npm i @micro-zoe/micro-app -S |
主应用入口1
2
3
4// src/index.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
contianer组件1
2
3
4
5
6
7
8
9
10
11<template>
<div>
<h1>子应用</h1>
<!--
name(必传):应用名称
url(必传):应用地址,会被自动补全为http://localhost:3000/index.html
baseroute(可选):基座应用分配给子应用的基础路由,就是上面的 `/my-page`
-->
<micro-app name='learnvue' url='http://localhost:8081/' baseroute="/dentition"></micro-app>
</div>
</template>