• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-single-spa: 基于vuejs的微前端demo项目。内含 vuejs,react,angular 三个子项目 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-single-spa

开源软件地址:

https://gitee.com/Janlaywss/vue-single-spa

开源软件介绍:

vue-single-spa

基于vuejs为底座,single-spa 为框架的微前端示例工程

更新日志

  • 2019.12.20: 支持使用子项目的manifest.json 自动加载所需要的js文件(请重新install vue子项目 和 父项目)
  • 2019.12.18: vue,react子项目支持任何环境下独立运行(请重新build dist文件)
  • 2019.12.17: 解决不同语言服务切换时造成的服务无法挂载问题
  • 2019.12.12: 样式隔离,父项目控制子项目路由跳转 (需要切换到子vue项目,重新npm install 一下)
  • 2019.10.27: 父子项目分离,远程加载

说明

子项目均在 subprojects内, 三个项目互不关联,相互隔离。

  • 本示例主要说明,微前端的简单示例,和如何远程加载微前端模块,所以需要启动三个项目工程
  • single-spa 配置文件在src/single-spa-config.js。vue & react 项目的入口文件均有注释
  • 如果还不了解,请前往single-spa.js 官网查阅文档
  • https://single-spa.js.org

安装步骤:

1. Vuejs:

- cd sub-projects/sub-app-vuejs- yarn install / npm install / cnpm install- npm run serve-vue

2. React:

- cd sub-projects/sub-app-react16- yarn install / npm install / cnpm install- npm run build- npm run serve-react

3. Angular:

- cd sub-projects/sub-app-angular- yarn install / npm install / cnpm install- npm run build- npm run serve-angular

4. vue-single-spa-back:

- yarn install / npm install / cnpm install- npm run serve-spa

端口:

  • vuejs: 3000
  • react: 3001
  • angular: 3002

个人微信

欢迎添加微信探讨


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap