位置: IT常识 - 正文

vue3+ts+MicroApp实战教程

编辑:rootadmin
这篇文章主要介绍了vue3+ts+MicroApp实战教程,分别在主应用项目(main)和子应用(childrenOne,childrenTwo)项目中安装microApp,本文给大家详细讲解,需要的朋友可以参考下 目录

推荐整理分享vue3+ts+MicroApp实战教程,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

项目准备子项目配置主应用项目配置项目准备

1、基于amin-work-x项目作为原始项目,改造动态菜单为自定义菜单

2、分别在主应用项目(main)和子应用(childrenOne,childrenTwo)项目中安装microApp

npm i @micro-zoe/micro-app --save子项目配置

1,修改子项目mian.ts,添加与基座的交互配置和路由冲突解决

import { createApp } from "vue";import App from "./App.vue";import { Router } from 'vue-router'import router from "./router";import "./utils/router";import ElementPlus from "element-plus";import "element-plus/dist/index.css";import "dayjs/locale/zh-cn";import zhCn from "element-plus/es/locale/lang/zh-cn";import "@/icons/iconfont/iconfont.css";import "@/icons/iconfont/iconfont.js";import "@/styles/main.css";import LayoutStore from "@/layouts";import http from "@/api/http";import { registerComponents } from "./components";import * as Icons from "@element-plus/icons";import pinia from "./store/pinia";import "./setting";declare global {interface Window {microApp: any__MICRO_APP_NAME__: string__MICRO_APP_ENVIRONMENT__: string__MICRO_APP_BASE_ROUTE__: string}}// 与基座进行数据交互function handleMicroData(router: Router) {// 是否是微前端环境if (window.__MICRO_APP_ENVIRONMENT__) {// 监听基座下发的数据变化window.microApp.addDataListener((data: Record<string, unknown>) => {console.log('child-vue3 addDataListener:', data)// 当基座下发path时进行跳转if (data.path && data.path !== router.currentRoute.value.path) {router.push(data.path as string)}})// 向基座发送数据setTimeout(() => {window.microApp.dispatch({ myname: 'tenant-app' })}, 3000)}}/*** 用于解决主应用和子应用都是vue-router4时相互冲突,导致点击浏览器返回按钮,路由错误的问题。* 相关issue:https://github.com/micro-zoe/micro-app/issues/155* 当前vue-router版本:4.0.12*/function fixBugForVueRouter4(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')) {/*** 重要说明:* 1、这里主应用下发的基础路由为:`/main-xxx/app-vue3`,其中 `/main-xxx` 是主应用的基础路由,需要去掉,我们只取`/app-vue3`,不同项目根据实际情况调整** 2、realBaseRoute 的值为 `/app-vue3`*/const realBaseRoute = window.__MICRO_APP_BASE_ROUTE__;//.replace(/^\/app-tenant-[^/]+/g, '')router.beforeEach(() => {if (typeof window.history.state?.current === 'string') {window.history.state.current = window.history.state.current.replace(new RegExp(realBaseRoute, 'g'), '')}})router.afterEach(() => {if (typeof window.history.state === 'object') {window.history.state.current = realBaseRoute + (window.history.state.current || '')}})}}const app = createApp(App);Object.keys(Icons).forEach((it) => {app.component(it, (Icons as any)[it]);});registerComponents(app);app.use(LayoutStore, {state: {layoutMode: "ltr",},actions: {onPersonalCenter() {router.push({ path: "/personal", query: { uid: 1 } });},onLogout() {router.replace({ path: "/login", query: { redirect: "/" } }).then(() => {window.location.reload();});},},});app.use(pinia).use(router);app.use(ElementPlus, {locale: zhCn,});app.use(http);app.mount("#app");handleMicroData(router)fixBugForVueRouter4(router)// 监听卸载操作window.addEventListener('unmount', function () {//console.log("r4开始卸载", window.location, window.history, app)app?.unmount()//console.log('微应用child-vue3卸载了')})

2,修改vue.config.js文件,配置publicPath、端口号、允许跨域

3,为保证子应用的路由在主应用中能直接使用,可在每个路由前添加子应用的路由标志

这一步可不操作,如果不添加,则需要在主应用添加菜单或者动态获取菜单时,根据其他标志,为路由手动加上当前子应用的标志,用于判断子应用来源

vue3+ts+MicroApp实战教程

4、修改子应用路由问history模式

const router = createRouter({history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__||process.env.BASE_URL),routes: mapTwoLevelRouter([...constantRoutes, ...asyncRoutes]),});主应用项目配置

1,在layout中添加子应用入口文件(src\layouts\microapp\app-one.vue)

<template><div><micro-appname="appname-one":url="url"baseroute="/app-main":data="microAppData"@created="handleCreate"@beforemount="handleBeforeMount"@mounted="handleMount"@unmount="handleUnmount"@error="handleError"@datachange="handleDataChange"style="height: 100%"></micro-app></div></template><script lang="ts">export default {name: "name-app",data() {return {url:process.env.NODE_ENV === "development"? "http://localhost:4009/app-one": "通过配置获取线上地址",microAppData: { msg: "来自基座的数据" },};},methods: {handleCreate(): void {console.log("child-vue3 创建了");},handleBeforeMount(): void {console.log("child-vue3 即将被渲染");},handleMount(): void {console.log("child-vue3 已经渲染完成");setTimeout(() => {// eslint-disable-next-line @typescript-eslint/ban-ts-comment// @ts-ignorethis.microAppData = { msg: "来自基座的新数据" };}, 2000);},handleUnmount(): void {console.log("child-vue3 卸载了");},handleError(): void {console.log("child-vue3 加载出错了");},handleDataChange(e: CustomEvent): void {console.log("来自子应用 child-vue3 的数据:", e.detail.data);},},};</script><style></style>

2,在主应用中注册子应用路由

子应用的路由第一次指向主应用的layout,第二层指向上面新建的入口文件

3,修改主应用publicPath

此处的publicPath需与app-one中的baseroute保持一致

配置完成后,先后运行两个项目后,在主应用中手动添加一个子应用的的具体页面路由,就可以在主应用中打开子应用了,但是此时子应用的路由表覆盖了主应用。

为解决这个问题,需要在子应用中添加一个非layout布局的空页面,当子应用单独运行时,指向layout布局页面,如果是在微服务中使用,则指向空页面

src\layouts\EmptyLayout.vue

<template><div class="empty-layout"><router-view> </router-view></div></template><style lang="scss" scoped>.empty-layout {height: 100%;}</style>

src\router\index.ts

到此这篇关于vue3+ts+MicroApp实战教程的文章就介绍到这了,更多相关vue3 ts MicroApp内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

本文链接地址:https://www.jiuchutong.com/zhishi/310383.html 转载请保留说明!

上一篇:js逻辑操作符的介绍(js逻辑表达式)

下一篇:电脑学习网教大家2022年最新WordPress官方微信支付接口设置傻瓜设置教程-OK源码教学(网上学电脑哪个软件好)

  • 增值税留抵税额计入什么科目
  • 研发支出属于什么科目借贷方向
  • 事业单位固定资产计提折旧是当月还是次月
  • 什么经营范围可以开茶叶发票
  • 年终奖计入工伤赔偿
  • 自行研发无形资产暂时性差异
  • 售后回租利息和租金区别
  • 预付款与定金的比例
  • 建筑公司现金日记账怎么填写
  • 合并报表中少数股东权益是什么意思
  • 预付了订金收到发票怎么做分录?
  • 材料采购计入什么会计科
  • 财政授权支付凭证后多久打款
  • 增值税发票红字发票怎么做凭证
  • 进项发票不够如何避税
  • 电子发票是专用发票吗
  • 关于土地增值税若干问题的通知
  • 企业重组有什么好处
  • 对公账户分为一般户和基本户
  • 不良品的会计处理方法
  • 电费冲销是什么意思
  • 用工和用人单位
  • 个人储蓄存款利率
  • 内部交易的会计分录
  • 工资晚发一个月个税怎么申报的
  • 装修公司购入材料计入什么科目
  • 长期股权投资采用成本法核算,被投资单位实现的净利润
  • 交易性金融资产属于什么类
  • 收到退回增值税和附加税怎么处理
  • 对方已经认证的红字发票怎么开
  • 抵押房屋可以出卖吗
  • 生产性生物资产包括哪些
  • 公司注销账上有固定资产转给股东还要交税吗
  • php怎么把图片存入mysql
  • incredicle
  • phpnow升级php版本
  • php主要用于
  • yii框架官网
  • 个人开发微信支付接口
  • thinkphp ide
  • 微信小程序开发公司
  • web前端修炼之道
  • 2023前端面试题目
  • 制造费用的科目
  • 应税工资和实发工资区别
  • 企业合并兼并收购的区别和联系
  • 坏账准备检查情况表怎么填
  • 帝国cms自定义列表
  • 单位收的房租可以发工资吗
  • 帝国cms功能
  • wp留言板插件
  • 预付卡账务处理在注会
  • 企业开办费如何在税前扣除
  • 管理费用的范畴
  • 公司向个人借款合法吗
  • 国债利息收入的分录
  • 机动车临时号牌怎么贴
  • 货代是否负责损失
  • 活动经费要发到每个员工
  • 职工福利费无发放原因
  • 基本户打款个人怎么办
  • 记账凭证应交税费填写样本图片
  • mysqldump -h
  • xp系统环境变量
  • 如何解决cpu超频问题
  • wdsvc.exe - wdsvc 是什么进程
  • win10 rs1是什么版本
  • win10win8双系统
  • win7电脑出现广告弹窗怎么办
  • ms-dos 6.2批处理文件高级指南
  • android环境搭建教程
  • 安卓焦点
  • javascript总结笔记
  • 吉林税务网上办事大厅
  • 江苏省国税电子税务局官网发票验
  • 涉税服务业务是什么
  • 湖北省税务申报流程 个体户
  • 杭州残保金2021年新政策申报时间
  • 政府主管部门对企业检查要求
  • 买辆12万的车上路共需要多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设