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/ 好,第一步把这个基石...
* 当前vue-router版本:4.0.12*/functionfixBugForVueRouter4(router: Router) {//判断主应用是main-vue3或main-vite,因为这这两个主应用是 vue-router4if(window.__MICRO_APP_ENVIRONMENT__) {//if (window.location.href.includes('/main-vue3') || window.location.href.includes('/main-vite')) {/...
micro-app 在 window 下面挂载了一个全局的对象,我们只需要去触发它提供的方法,完成主子之间的通信即可,不管是交互逻辑还是数据传递逻辑,就都通了。 c. 主应用成功引入子应用(子应用是 VUE 项目) 到目前为止如果我们的项目不存在跨域问题,子应用就已成功接入了主应用,此时我们就可以看到如下图: 左侧是主应用,中...
先进的无线B超成像系统. 管辖权声明: microVUE针对中国大陆使用。我们在中华人民共和国(“中国”)境内本App进行控制和运营;除非另有说明,否则本APP上所展示的材料仅用于在中国境内推广产品和服务之目的。我们并未对本APP上的任何材料在任何其他地方的适用性或适宜性
vite+vue+micro-app 配置分为两部分，主应用也就是基座应用，子应用部分：基座应用：入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法...
在Vue2项目中搭建微前端MicroApp可以通过以下步骤实现: 1. 创建Vue2项目 首先,你需要创建一个Vue2项目。如果你还没有安装Vue CLI,可以使用以下命令进行安装: bash npm install -g @vue/cli 然后,创建一个新的Vue2项目: bash vue create my-vue2-app 按照提示选择Vue 2作为项目的版本。 2. 安装MicroApp...
npm i @micro-zoe/micro-app --save 1. 2. 导入并启用微前端框架 microApp src/main.ts AI检测代码解析 import microApp from '@micro-zoe/micro-app' microApp.start() 1. 2. 3. 3. 添加配置 vite.config.ts 的 vue 中添加配置 AI检测代码解析 ...
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 快速开始 1. 基座应用 //初始化一个vue应用 vue create main-vue //安装 @micro-zoe/micro-app 依赖 npm i @micro-zoe/micro-app --save // 入口添加 ...
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 快速开始 1. 基座应用 //初始化一个vue应用 vue create main-vue //安装 @micro-zoe/micro-app 依赖 npm i @micro-zoe/micro-app --save // 入口添加 ...
PC统一使用react,但是有一些老的项目是vue的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此想借助本次机会用react开发,经过了几番思考,发现本次很适合用微前端来完成本次需求,最终决定用react搭建一个基座(主应用),将原来的vue项目接入到基座,这样不仅实现了新页面react开发,而且老项目也能和新...