江苏龙网

  1. 首页 > 资讯 > 科技 > >

|公司前端代码，俺很懂


|公司前端代码，俺很懂
本文插图

?●●●
微前端这个词这两年很频繁的出现在大家的视野中 ， 主要是把微服务的概念引入到了前端 ， 让前端的多个模块或者应用解耦 ， 做到让前端的子模块独立仓储 ， 独立运行 ， 独立部署 。
下面是微前端的概念图 。
|公司前端代码，俺很懂
本文插图

为什么需要微前端？
1. 项目前端是单体应用即负责貌美如花还要赚钱养家 ， 而后端使用微服务只需要负责分家家然后给前端送朵花花 。 前端单体承担了所有的接口 。
2.系统模块增多 ， 前端单体应用变得肥胖 ， 开发效率低下 ， 构建速度变慢 。 前端心想：哼 ， 老娘就使劲的吃 ， 浏览器也别想看见我 ， 卡死你 。
3.公司人员扩大 ， 需要多个前端团队独立开发 ， 独立部署 ， 如果都在一个仓储中开发会带来一系列问题 ， 例如：老子辛苦一天写的代码 ， 第二天让别人弄没了 。
4.解决遗留系统问题 ， 新模块需要使用最新的框架和技术 ， 旧系统还继续使用 。
5.单体前端带来的测试问题 。 前端小姐姐分模块测试 ， 这时正遇到构建发布 ， 多人运动戛然而止 。
6.编不下去了 。。。。。。
微前端技术选型之路
目前关注度和成熟度最高的应该就是 single-spa ， 但是国内也有很多团队都有自己的微前端框架 ， 像蚂蚁金服的qiankun,phodal 的 mooa,阿里飞冰的icestark ， 这些都是比较出名的微前端解决方案 。 但是这些框架都有一定的局限性 ， 像mooa是针对Angular 打造的主从结构的微前端框架 ， icestark是最近才出的方案 ， 而qiankun官网的开发文档就仅仅的几十行 。 本文将对qiankun进行几个方面讲解 。
聊一聊qiankun
没错 ， qiankun正是光天化日 ， 朗朗乾坤的乾坤 。 qiankun是一个开放式微前端架构 ， 支持当前三大主流前端框架甚至jq等其他项目无缝接入 。
qiankun是基于路由配置 ， 适用于 route-based 场景 ， 通过将微应用关联到一些 url 规则的方式 ， 实现当浏览器 url 发生变化时 ， 自动加载相应的微应用的功能 。
qiankun在Vue项目中的使用
1、微前端构建
构建主应用
1、使用vue脚手架初始化项目或者原有Vue项目
2、npm install qiankun --save下载qiankun微前端方案依赖
3、改造主项目,很简单 ， 在src创建一个qiankun文件夹,创建init.js文件 ， 文件内容：
import { registerMicroApps, // 注册子应用方法 setDefaultMountApp, // 设默认启用的子应用 runAfterFirstMounted, // 有个子应用加载完毕回调 start, // 启动qiankun addGlobalUncaughtErrorHandler, // 添加全局未捕获异常处理器 } from ''qiankun''; function genActiveRule(routerPrefix) {//路由监听 return location => location.pathname.startsWith(routerPrefix); } export default function startQiankun() { const apps = [//子应用配置 { name: 'admin', entry: ''//localhost:9528'', container:'#admin',//将子应用节点挂载到父应用定义id=admin的div上 activeRule: genActiveRule('/admin'),//路由前缀 props: {mag:”我是主应用”} //父应用给子应用传参 } ] //注册子应用 registerMicroApps(apps, { beforeLoad: [//子应用加载生命周期 ， 下同 app => { console.log(''before load'', app); } ], beforeMount: [ app => { console.log(''before mount'', app); } ], afterUnmount: [ app => { console.log(''after unload'', app); } ] }) // 设置默认子应用 //setDefaultMountApp('/admin'); // 第一个子应用加载完毕回调 runAfterFirstMounted((app) => { console.log(app) }); // 启动微服务 start({ prefetch: 'all'//预加载子应用静态资源 }); // 设置全局未捕获一场处理器 addGlobalUncaughtErrorHandler(event => console.log(event)); }4、在App.vue中加入<div id=''admin''></div>即可


推荐阅读


上一篇：AI烽火|物流共享那些事，你了解多少？

下一篇：成都商报红星新闻|“618”没买够？“718”中国西博嗨购节奉上7倍嗨购时长！