微前端(拆分和细化,整合历史系统)

这篇具有很好参考价值的文章主要介绍了微前端(拆分和细化,整合历史系统)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

接入微前端

项目背景说明

假如我们完成了基于Vue2的项目,假设另外一个团队的小伙伴来实现前台可视化部分,他们使用的是最新的Vue3技术栈,现在有一个需求,他们的前台项目想直接使用我们的登录功能,获得token,进行数据获取渲染,这时候该怎么办呢?

1后台管理用户是老的Vue2技术栈,前台可视化项目用的是Vue3的技术栈 - 技术栈不同独立

2在用户信息上,前台可视化项目依赖于后台中的token数据 - 存在主次关系

3后台管理开发时由A团队开发,前台可视化B团队开发 - 独立开发互不影响

引入微前端,可以让一个大项目拆分成多个小项目,各自独立维护,互相不影响,并且还可以共享资源

微前端的好处

微前端是一种前端架构模式,它将大型单体应用程序分解为小的、松散耦合的部分,每个部分都可以独立开发、测试和部署。微前端的好处如下:

1.增强团队独立性:微前端使团队可以独立开发和部署其功能,而无需等待其他团队完成其工作。这提高了团队的独立性,减少了彼此之间的依赖性。

2.提高可维护性:微前端使开发人员可以将应用程序拆分为小的、可维护的部分。这些部分可以独立开发、测试和部署,从而使整个应用程序更易于维护。

3.提高可扩展性:微前端使开发人员可以更容易地添加新功能和模块,而无需更改整个应用程序。这提高了应用程序的可扩展性和灵活性。

4.降低风险:微前端使开发人员可以更容易地测试和部署单个模块,从而减少了整个应用程序出现问题的风险。

5.提高性能:微前端使开发人员可以在不影响整个应用程序的情况下优化单个模块的性能。这提高了应用程序的整体性能和用户体验。

总之,微前端使开发人员可以更容易地构建、维护和扩展大型单体应用程序,从而提高了应用程序的质量和可靠性。
微前端(拆分和细化,整合历史系统),前端

乾坤方案改造

https://qiankun.umijs.org/zh

1. 主应用改造

1- 安装乾坤

npm i qiankun

2- 新增配置文件

resisterMicroApp.js

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'hmzs-big-screen', // 子应用名称
    entry: '//localhost:5173', // 子应用运行服务地址(就是npm run dev时的那个地址)
    container: '#container', // 挂载容器(id=container)
    activeRule: '/big-screen' // 激活路由(在哪个路由下加载子应用)
  }
])

start()

3- 入口文件启动

// 启动微前端配置
import './registerMicroApp'

4- 配置子应用渲染的位置

<template>
  <div id="app">
    <router-view />
    <!-- 子应用挂载节点 -->
    <div id="container" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

2. 子应用改造

1- 配置vite-qiankun插件

npm i vite-plugin-qiankun -D
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'


export default defineConfig({
  base: '/',
  plugins: [
    vue(), 
    // 这里的名称要和主应用改造是配置项中的name保持一致
    qiankun('Xxxx', {
      useDevMode: true
    })
  ],
  server: {
    // 防止开发阶段的assets 静态资源加载问题
    origin: '//localhost:5173'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  }
})

2- 入口文件改造

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

import './styles/common.scss'


// 使用乾坤渲染
renderWithQiankun({
  // 挂载时
  mount (props) {
    console.log('mount')
    render(props)
  },
  bootstrap () {
    console.log('bootstrap')
  },
  unmount (props) {
    console.log('unmount', props)
  },
})

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

function render (props = {}) {
  const { container } = props
  const app = createApp(App)
  app.use(router)
  app.mount(container ? container.querySelector("#app") : "#app")
}

使用无界方案进行改造

无界微前端方案基于 WebComponent 容器 + iframe 沙箱

能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等

1. 安装无界

https://wujie-micro.github.io/doc/

安装vue2组件

npm i wujie-vue2

注册插件

import WujieVue from 'wujie-vue2'

Vue.use(WujieVue)

2. 微前端配置

思路:

  1. WujieVue组件通过url地址对子应用进行载入,url直接配置子应用的地址
  2. 设计一个路由地址,以当前路由地址作为判断条件,如果当前路由为 big-screen 就让WujieVue开始渲染

主应用配置(Vue2后台管理)

<template>
  <div id="app">
    <router-view v-if="!showMicroApp" />
    <!-- 子应用挂载节点 -->
    <WujieVue v-else width="100%" height="100%" name="bigscreen" :url="url" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      url: 'http://localhost:5173/big-screen' // 子应用服务地址
    }
  },
  computed: {
    showMicroApp() {
      return this.$route.path === '/big-screen'
    }
  }
}
</script>

子应用配置(Vue3大屏项目)

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    // 防止开发阶段的assets 静态资源加载问题
    origin: '//localhost:5173'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3. 大屏按钮跳转

微前端(拆分和细化,整合历史系统),前端

<div class="avatar-wrapper">
  <el-button size="small" plain 
    @click="$router.push('/big-screen')">可视化大屏</el-button>
  <!-- 用户名称 -->
  <span class="name">XXXXXXX</span>
</div>

3. 大屏按钮跳转

[外链图片转存中…(img-wy1KUdlR-1688565310858)]文章来源地址https://www.toymoban.com/news/detail-526149.html

<div class="avatar-wrapper">
  <el-button size="small" plain 
    @click="$router.push('/big-screen')">可视化大屏</el-button>
  <!-- 用户名称 -->
  <span class="name">XXXXXXX</span>
</div>

到了这里,关于微前端(拆分和细化,整合历史系统)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • k8s通过系统配置文件kubeconfig文件实现权限的精细化分配

    k8s的apiserver地址为:https://xxx:6443 token=“xxx” cfssl 安装 cfssljson 安装 生产证书 1.设置集群参数 config文件引入集群ca证书,这里的set-cluster 可以任意设置,想叫什么集群名字都可以,我这里定义为mykubernetes,kubeconfig文件名称也随意定义,我这里定义为test.kubeconfig,此命令执行后

    2024年02月13日
    浏览(47)
  • 大中型WMS仓储管理系统选型推荐,实现货品出入库精细化管理-亿发

    智能制造是基于信息技术,通过将生产设备、工作流程、供应链等各个环节进行智能化互联,实现生产过程的优化和智能化管理的模式。它涵盖了数字化、网络化、智能化等多方面的科技,旨在增强生产效率、灵活度和质量。 WMS,即仓储管理系统,是一种专门用于管理仓库运

    2024年02月10日
    浏览(46)
  • 前端如何实现搜索记录展示以及清楚历史搜索记录

    div class=\\\"historydata\\\" v-show=\\\"input\\\"             div历史搜索/div             ul class=\\\"\\\"               li v-for=\\\"(item, index) in historyList\\\" :key=\\\"index\\\" class=\\\"text\\\"                 {{ item }}               /li             /ul           /div  mounted() {     if (JSON.parse(localStorage.getItem(\\\"history

    2024年02月06日
    浏览(47)
  • 前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除

    前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空 搜索历史存储记录清除,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13343 效果图如下: 使用方法 HTML代码实现部分

    2024年02月16日
    浏览(40)
  • ECMAScript6历史-前端开发+ECMAScript+基础语法+入门教程

    我们首先来看 ECMA 是什么。 ECMA ,读音类似“埃科妈”,是 欧洲计算机制造商协会 (European Computer Manufacturers Association)的简称,是一家国际性会员制度的信息和电信标准组织。1994年之后,由于组织的标准牵涉到很多其他国家,为了体现其国际性,更名为 Ecma 国际 (Ecma In

    2024年01月16日
    浏览(49)
  • 如何在 MAC 系统下拆分 PDF 页面?

    ①用 MAC 自带的 “预览” 软件打开需要拆分的 PDF 文件 ②鼠标左键在 PDF 的侧边栏点选 “缩略图” ③鼠标左键点选需要拆分的 PDF 页面(如需多选页面可在键盘上按住 “shift 键” 或者 “command 键” 同时用鼠标点击);将选中的 PDF 页面直接拖到桌面,鼠标变成 “+” 号就放

    2024年02月16日
    浏览(32)
  • 前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用

    前端Vue自定义顶部搜索框 热门搜索 历史搜索 用于搜索跳转使用, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 自定义顶部搜索框 用于搜索跳转使用方法 HTML代码实现部分

    2024年02月09日
    浏览(64)
  • Day963.如何拆分数据 -遗留系统现代化实战

    Hi,我是 阿昌 ,今天学习记录的是关于 如何拆分数据 的内容。 如何拆分数据 ,这个场景在建设新老城区,甚至与其他城市(外部系统)交互时都非常重要。 作为开发人员,理想中的业务数据存储方式是什么样呢? 当然是负责一个业务的数据都在一张或几张名称相关的表中

    2024年02月03日
    浏览(47)
  • 开源在线客服系统-客服系统历史消息记录功能-点击加载历史聊天记录-分页展示历史消息功能实现

    之前开发的开源在线客服系统gofly,访客端一直没有展示历史聊天记录,最近抽时间给加上了 实现的效果就是,访客刚进聊天界面,如果存在历史记录,按5条分页,默认查询加载5条聊天记录。 如果历史记录超过5条,顶部出现 “点击加载更多” 按钮,点击按钮就分页查询历

    2023年04月12日
    浏览(51)
  • C语言操作符篇章+系统讲解分析+深入理解操作符+原反补结合的具体应用+根源进行讲解+进制转换+操作环境+实例剖析+上万字+百张图片精细化讲解

    在讲解操作符之前需要讲解一下原反补和进制之间的转换 并且在讲解操作符的时候会重点对难点进行讲解,也就是算数操作符和逻辑操作符 并且会在讲解附带实例 和最后面的代码分析 ————————————————————————————————————————

    2024年02月20日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包