1. 第一步,创建2个vue3+vite项目 创建【main-vue3-app】主系统,以及【child-vue3-app】子系统。 然后就是安装 vue-router、sass依赖,里面代码敲敲敲,再把主、子系统跑起来。 ps: 主系统访问ip端口:http://127.0.0.1:1111/ 子系统访问ip端口:http://127.0.0.1:2222/child-vue3/ 好,第一步把这个基石...
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 快速开始 1. 基座应用 //初始化一个vue应用vue create main-vue//安装 @micro-zoe/micro-app 依赖npm i @micro-zoe/micro-app --save// 入口添加 // main.jsimport Vue from "vue";import App from "./...
content里面可以任意放不同技术的子应用,只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。 4.3 搭建微前端基座 以...
microVUE12+ Guangzhou SonoHealth Medical Technologies Co., Ltd. 专为iPad 设计 4.2 • 5 个评分 免费 截屏 iPad iPhone 简介 先进的无线B超成像系统. 管辖权声明: microVUE针对中国大陆使用。 我们在中华人民共和国(“中国”)境内本App进行控制和运营;除非另有说明,否则本APP上所展示的材料仅用于在中国境内...
2-1、创建base,在micro-app-demo文件夹下安装 接上一步,使用vsCode将新建好的文件夹micro-app-demo打开,如下图所示,打开一个新终端,在下面输入命令创建base,创建时可选择vue2还是vue3,我这边以vue2为例,如果要选vue3的话,下面代码中的语法会不一样。
window.microApp.dispatch({ myname:'tenant-app'}) },3000) } }/** * 用于解决主应用和子应用都是vue-router4时相互冲突,导致点击浏览器返回按钮,路由错误的问题。 * 相关issue:https://github.com/micro-zoe/micro-app/issues/155 * 当前vue-router版本:4.0.12*/functionfixBugForVueRouter4(router: ...
1. 安装微前端框架 microApp npm i @micro-zoe/micro-app --save 1. 2. 导入并启用微前端框架 microApp src/main.ts import microApp from '@micro-zoe/micro-app' microApp.start() 1. 2. 3. 3. 添加配置 vite.config.ts 的 vue 中添加配置 ...
在Vue2项目中搭建微前端MicroApp可以通过以下步骤实现: 1. 创建Vue2项目 首先,你需要创建一个Vue2项目。如果你还没有安装Vue CLI,可以使用以下命令进行安装: bash npm install -g @vue/cli 然后,创建一个新的Vue2项目: bash vue create my-vue2-app 按照提示选择Vue 2作为项目的版本。 2. 安装MicroApp...
micro-app【微前端系列教程】生命周期 子应用渲染过程中会触发相应的生命周期事件 vue 中监听生命周期事件 <template> <micro-app name='xx' url='xx' @created='created' @beforemount='beforemount' @mounted='mounted' @unmount='unmount' @error='error'...
MicroApp 的接入成本低、兼容性高、性能强是我们选择MicroApp作为微前端框架使用的重要因素~ 快速开始 主应用-React 架构图 1、项目准备 1.1 创建项目 创建主应用项目:npx create-react-app react18 创建子应用项目-react:npx create-react-app react18 创建子应用项目-vue3:vue create vue3 1.2 安装相关依赖 ...