微前端
luckybing~
一个积极向上、乐观开朗、遇到Bug想一晚上、没秃顶、会写段子的web前端工程师
展开
-
(五)微前端之框架
1. 官方学习文档乾坤是在 single-spa 的基础上进行的封装 上手简单 官网:介绍 - qiankun代码实战:快速上手 - qiankun2. 项目实战基座项目(主应用):Vue微应用(子应用):2个 -- Vue 、原生 html 页面由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的,所以必须要求这些静态资源支持跨域主应用:import Vue from 'vue'import App from './App.vue'import r原创 2022-02-05 20:38:19 · 499 阅读 · 0 评论 -
(四)沙箱机制
使用single-spa会出现父子应用样式相互影响的问题,如何进行样式隔离呢?1. 使用 BEM (Block Element Modifier)约定项目前缀2. 使用 css modules 打包时生成不冲突的选择器名3. css-in-js (不建议)4. shadow Dom 真正意义上的隔离沙箱机制1. 快照机制原理就是运行在某一环境A时,打一个快照,当从别的环境B切换回来的时候,我们通过这个快照就可以立即恢复之前环境A时的情况简单一句话:保存不同 切换应用的时.原创 2022-02-05 03:39:02 · 461 阅读 · 0 评论 -
(三)子应用含有路由
如果子应用中含有 vue 路由会怎么样呢,可以看一下子路由定义:import Vue from 'vue'import Router from 'vue-router'import Home from '@/Home/index.vue'import About from '@/About/index.vue'Vue.use(Router)export default new Router({ mode: 'history', routes: [{ path: '/h原创 2022-02-04 15:03:19 · 410 阅读 · 1 评论 -
(二)微前端实战
1. 项目搭建首先启动两个 vue-cli 应用:vue-cli-child、vue-cli-parent我们需要父应用加载子应用,子应用需要暴露 3个方法:bootstrap、mount、unmount使用 single-spa 子应用需要下载 npm 包 single-spa-vue,3个方法可以通过这个包引入然后使用single-spa 仅仅是一个子应用生命周期的调度者single-spa 为应用定义了 boostrap, load, mount, unmount 四个生命周期回原创 2022-02-04 14:12:14 · 631 阅读 · 0 评论 -
(一)微前端
背景一个项目,所有的页面都在一个工程里,如果改一个bug,或者增加一些功能,需要整体一个项目全部打包编译,需要的时间很长,如果可以把每一个页面(模块)拆出来,修 bug 只需要打包编译自己模块的就好了,这样就会节省很多时间微前端的思想:把每一个模块都拆分成不同的子应用,最后组装起来 到 主应用中每一个子应用可以技术栈不同,一个子应用用 vue,一个子应用用react,一个子应用用 vue2,一个子应用用 Vue3,都是可以的我们会将一个个子应用打包成一个个的 lib,当路径切换时加载不原创 2022-02-04 10:44:51 · 292 阅读 · 0 评论