React>> qiankun-vue-demo>> 返回
项目作者： Joycezhangw

项目描述 ：
微前端解决方案qiankun测试用例，主应用及子应用均为vue-cli 4 构建，实现在主应用自己的页面和子应用的页面自由跳转
高级语言： JavaScript
项目地址: git://github.com/Joycezhangw/qiankun-vue-demo.git
创建时间： 2020-06-16T02:05:31Z
项目社区：https://github.com/Joycezhangw/qiankun-vue-demo
开源协议：Other
下载


项目介绍

  • 使用 qiankun 来实现 vue 技术栈的微前端服务
  • 主应用和子应用都是使用 history 路由模式
  • 主应用不仅只是微前端的基座，它也有自己的业务承载，实现在主应用自己的页面和子应用的页面自由跳转
  • 主/子应用，都是使用 vue-cli 4 下创建的vue项目，单独运行项目命令，请参照 Vue CLI 官方文档

目录结构

  1. ├─bin                                整个项目的打包，运行执行目录
  2. │  ├─install.js                      安装所有项目依赖
  3. │  ├─start.js                        启动dev项目
  4. │  └─build.js                        打包所有项目
  5. | 
  6. ├─master                             主应用
  7. │  ├─src               
  8. │  │  ├─config                        项目配置目录
  9. │  │  ├─core                          项目初始化目录
  10. │  │  ├─├─registerMicroApps.js        注册qiankun子应用
  11. │  │  ├─├─install.js                  全局插件
  12. │  │  ├─├─render.js                   vue初始化
  13. │  │  ├─└─...           
  14. │  │  ├─plugins                       第三方插件目录
  15. │  │  ├─├─element.js                  elementUI 入口
  16. │  │  ├─├─install.js                  注册第三方插件
  17. │  │  ├─└─...            
  18. │  │  └─ ...                          更多vue目录
  19. │  │
  20. │
  21. ├─subapp-test               子应用
  22. │  ├─src                    
  23. │  │  └─...                 
  25. │
  26. ├─package.json          整个微前端服务模块描述文件
  27. ├─LICENSE.txt           授权说明文件
  28. ├─README.md             README 文件

运行和打包

安装微应用依赖教程

npm run hm-install-all

项目启动开发环境

npm run hm-serve-all

打包所有项目

npm run hm-build-all

您也可以使用 npm-run-all 插件来实现：一个命令，运行所有项目，该插件要在根目录下创建package.json然后进行npm install npm-run-all --save-dev

npm-run-all 开源地址，文档

说明

更多关于qiankun实践文章，请看作者：沉末_ qiankun 微前端方案实践及总结

感谢