在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
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() 第五步:...
setup() { const state = reactive({ microApp_ifs: null, microApp_pis: null, microApp_tms: null, data: [], ifs: 0, pis: 0 }); const route = useRouter(); watch(() => route.currentRoute.value.path, (count, prevCount) => { if (count.indexOf('/ifs/eam') != -1) { state...
Open opened this issueJan 18, 2022· 1 comment senrocommentedJan 18, 2022• edited Collaborator gongshuncommentedJan 18, 2022 vue-router 有 abstract 模式,但是不能用MicroAppWithMemoHistory标签,需要用手动加载的方式 👍1cuijiudai reacted with thumbs up emoji ...
micro-app版本:"@micro-zoe/micro-app": "^1.0.0-rc.16", 主应用前端框架&版本:vue2, "ant-design-vue": "^1.7.8", 子应用前端框架&版本:vue3, "ant-design-vue": "^4.2.3", "vite": "^4.4.9", 构建工具&版本:node16.16.1 Sign up for free to join this conversation on GitHub. Alread...
本资源是在基于micro-app在vue-element-admin中的搭建之后对micro-app在vue-element-admin中的使用进行的进一步研究。 主要包括:路由、页面之间的跳转、数据通信、样式隔离、元素隔离、资源共享、组件共享等的一些研究。 注: (1)代码下载后要分别要对基座和子应用安装依赖npm install ...
import { useRouter } from "vue-router";export default { setup() { const state = reactive({ microApp_ifs: null, microApp_pis: null, microApp_tms: null, data: [], ifs: 0, pis: 0 }); const route = useRouter(); watch(() => route.currentRoute.value.path, (count, prevCount) ...
2-1、创建base,在micro-app-demo文件夹下安装 接上一步,使用vsCode将新建好的文件夹micro-app-demo打开,如下图所示,打开一个新终端,在下面输入命令创建base,创建时可选择vue2还是vue3,我这边以vue2为例,如果要选vue3的话,下面代码中的语法会不一样。