content里面可以任意放不同技术的子应用,只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。 4.3 搭建微前端基座 以...
content 里面可以任意放不同技术的子应用,我们只需要开发一个主应用(主应用也可以自由选择语言,目前支持 react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。 三、搭建微前端...
Username for 'https://gitee.com': userName 第一步:创建一个vite+vue3的父工程项目 npm init vite-app micro-app-vite-vue3.0 第二步:安装micro-app的依赖 npm i @micro-zoe/micro-app --save 第四步:main.js中引入插件,并开启 importmicroAppfrom'@micro-zoe/micro-app'microApp.start() 第五步:...
无界微前端方案基于 webcomponent 容器 + iframe 沙箱,能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。 文档地址,demo 地址:https://wujie-micro.github.io/demo-main-vue/home,git 地址:https://github.com/Tencent/wujie ...
content里面可以任意放不同技术的子应用,我们只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。
npmcreatevite@latestmain-app-- --template vue-ts AI代码助手复制代码 But:因为MicroApp使用的是 CustomElement,使用的时候与普通 dom 元素一致,在主应用配置路由时最好使用一个空白组件来放置子应用 这样,先创建一个简单的路由配置和对应页面 // router.tsimport{ createRouter, createWebHistory }from"vue-rout...
content里面可以任意放不同技术的子应用,我们只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。
npm create vite@latest main-app -- --template vue-ts 📌But:因为MicroApp使用的是 CustomElement,使用的时候与普通 dom 元素一致,在主应用配置路由时最好使用一个空白组件来放置子应用 这样,先创建一个简单的路由配置和对应页面 // router.tsimport { createRouter, createWebHistory } from "vue-router"...
content里面可以任意放不同技术的子应用,我们只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。
沙箱性能提升、虚拟路由系统、样式隔离改进、Vite 兼容以及开发工具增强。MicroApp 借助 WebComponent 思维，将微前端封装为类 WebComponent 组件，通过 JS 隔离、样式隔离与路由隔离降低接入成本，仅需设置跨域请求，无需修改任何代码即可接入框架，操作类似 iframe，但不具 iframe 的问题。