微前端：qiankun项⽬搭建
什么是微前端
微前端是⼀种多个团队通过独⽴发布功能的⽅式来共同构建现代化 web 应⽤的技术⼿段及⽅法策略。
微前端项⽬搭建流程
本⽂主要记录qiankun与vue-template相结合实现微服务框架过程。参考⽂档涉及 qiankun-TMVC、qiankun、element-ui、vue-element-admin
1、乾坤
qiankun 是⼀个基于 single-spa 的微前端实现库，旨在帮助⼤家能更简单、⽆痛的构建⼀个⽣产可⽤微前端架构系统。
2、vue-template
是⽤于后台前端解决的⽅案。它基于vue并使⽤element-ui，借鉴vue-element-admin前端解决⽅案。
项⽬结构
项⽬⽂件技术栈框架备注micro-mian vue.js、qiankun vue-template主应⽤
micro-son vue.js vue-template⼦应⽤
注意：需要本地安装有node与npm/yarn环境
微前端基座-主应⽤
基座是微前端项⽬的主应⽤，主要⽤于左侧导航栏和右侧内容展⽰、隐藏，具体配置流程如下：
1、注⼊依赖
主应⽤使⽤vue-template作为基础框架， 注⼊qiankun、 tmvc-base 依赖，这⾥需要注意qiankun版本，采⽤2.x以上版本。
使⽤命令⾏安装qiankun依赖：
npm install qiankun
安装tmvc-base依赖：
npm install tmvc-base
或是在package.json配置⽂件按照对应依赖：
"qiankun": "^2.4.4",
"tmvc-base": "^1.0.6",
package.json配置⽂件
2、配置⼦应⽤路由⽂件
导⼊⼦应⽤路由配置⽂件⾄src⽬录下，复制microRouter⽂件夹到src⽬录下，需要根据⾃⼰的项⽬做些更改。下载地址：基座路由⽂件microRouter
microRouter配置
microRouter->config.json代码如下：
添加⼦应⽤挂载节点
4、路由配置⽂件
在主应⽤修改路由配置⽂件，注⼊基座配置、⼦应⽤路由配置。
⼦应⽤路由配置⽂件下载地址：⼦应⽤路由⽂件。vue element admin
路由配置⽂件
⼦应⽤路由(src\router\modules\dist-menu.js)设置具体借鉴apps-menu.js。
对应的基座当中设置的⼦应⽤名称，⼦应⽤路由配置必须与配置的microRouter.js当中的“name“对应起来。
⼦应⽤路由配置
⼦应⽤配置
⼦应⽤是以vue-elment框架为主，基于qiankun底层的微前端框架，进⾏了⽣命周期、通讯、依赖等⼀系列封装，⽅便维护及快速注⼊到⼦应⽤。
1、注⼊依赖
命令⾏注⼊tmvc依赖
npm install tmvc
或是直接在package.json添加"tmvc": "1.0.16"
2、ma in.js 配置
在main.js⽂件中引⼊tmvc, 并且导出微应⽤⽣命周期，具体代码如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。