* 当前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')) {/...
在Vue3项目中使用micro-app进行微前端开发,可以遵循以下步骤: 1. 安装micro-app 首先,你需要在主应用(基座应用)中安装micro-app。你可以使用npm、yarn或pnpm进行安装: bash npm install @micro-zoe/micro-app --save # 或者 yarn add @micro-zoe/micro-app # 或者 pnpm add @micro-zoe/micro-app 2. 在...
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/ 好,第一步把这个基石...
3. 添加配置 vite.config.ts 的 vue 中添加配置 AI检测代码解析 vue({ template: { compilerOptions: { isCustomElement: (tag) => /^micro-app/.test(tag) } } }), 1. 2. 3. 4. 5. 6. 7. 4. 页面引入子应用 AI检测代码解析 <micro-app name="childApp1" url="http://127.0.0.1:5174/...
如果让你用Vue3和Element-Plus及手动写组件把[链接]这个网站完整的模仿下来,你会怎么做,预计需要多少时间完成。包括前端,后端(用nodejs的koa2框架),后台管理系统(用vue)。 2 回答1.8k 阅读✓ 已解决 使用echart报Cannot read properties of undefined (reading 'type')报错,该如何解决? 复现封装了一个函数,用...
3年前 vite.config.js 初始化工程 3年前 Loading... README 第一步:创建一个vite+vue3的父工程项目 npm init vite-app micro-app-vite-vue3.0 第二步:安装micro-app的依赖 npm i @micro-zoe/micro-app --save 第四步:main.js中引入插件,并开启 ...
qiankun，出身名门的微前端，基于single-spa来实现的，但是把那些繁杂的配置包装一层，使其简单易用，但是它没想到vite的出现，所以对于vite+vue3来说配置需要踩得坑太多了，险些爬不起来。。。micro-app、今天的主角，借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类Web...
1、依然使用推荐框架 vite + vue3 等基础框架做试用 2、下载依赖 AI检测代码解析 yarnadd@micro-zoe/micro-app--save 1. 当时笔者使用的版本是:@micro-zoe/micro-app@1.0.0-rc.4,后面为了解决一些问题(后述博客会有提及),增加了版本到@micro-zoe/micro-app@1.0.0-rc.5,各位小伙伴若基于本博客使用,注意...
微前端是将多个不同的 web 应用融合在一起渲染,但浏览器只有一个路由系统,这很容易造成应用之间的路由冲突,最常见的就是 vue3 的路由冲突问题。 上面是 vue-router 作者对于在微前端环境下的冲突问题的回答,他认为 vue-router 已经覆盖足够多场景,微前端的问题应该由微前端解决。 在我们刚开源时,并没有对路由...
3、Use components in page <!-- my-page.vue --><template><!-- 👇 name is the app name, url is the app address --><micro-appname='my-app'url='http://localhost:3000/'></micro-app></template> Sub application Set cross-domain support in the headers of webpack-dev-server ...