qiankun-vue2.0
在你决定 clone 项目的时候,希望你可以帮我点个
介绍
基于 qiankun+vue2.0 技术栈实现的前端微应用架构,实现了动态路由(所有路由均使用 history 模式)、主子应用以及子子应用之间的通信,并做了简单的自动化脚本命令,可用一行命令所有子应用的依赖安装、启动以及打包部署。
开源该 demo 的目的,只是想为大家在使用 qiankun 时提供一种思路。
问答
关于问题,请使用issues或加微信 lizhijie429
关于项目依赖包 qiankun-vue2-common
包内容简介: 所有子应用都需要对主应用下发的数据进行接收及处理、如果数据修改则通知到其他应用以及对主应用下发的路由数据进行处理,因为这些逻辑完全一样,因此将这些实现逻辑提取为一个 npm 包统一管理。
npm 地址:qiankun-vue2-common - npm (npmjs.com)
gitee 源码地址:qiankun-vue2-common
实现的功能: 在 vuex 中动态添加了 global 模块及 routes 模块;
- global 模块:封装了全局下发的数据,以及数据修改通知到其他应用;
- routes 模块:路由数据的封装以及组件的导入。
项目运行
-
项目克隆
git clone https://gitee.com/lizhijie429/qiankun-vue2.0.git
-
依赖安装
cd qiankun-vue2.0 npm install
-
项目启动
cd qiankun-vue2.0 npm run start
-
升级依赖 qiankun-vue2-common
cd qiankun-vue2.0 npm run update
编译部署
关于 qiankun 项目打包编译请查看文档:入门教程 (umijs.org) demo 将主应用和微应用部署到同一个服务器(同一个 IP 和端口),其他部署方式请自行查看官网文档。
打包编译
cd qiankun-vue2.0
npm run build
本地部署测试( Node.js 静态文件服务器——serve)
# 启动静态文件服务器
npm install -g serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
# 这个模式会处理即将提到的路由问题
serve -s dist
浏览器打开网址:http://localhost:5000 即可预览。
支持
如果觉得 qiankun-vue2.0 这个 demo 为你提供了不错的思路,或者已经在使用了,希望你可以帮我点个