从零搭建飞冰微前端项目《第三篇：搭建微应用》❤️
前言：
- 把微应用接入主应用，其实很简单，但是要还要考虑数据通信等等问题
- 路途有点远，也得慢慢走！
- 微应用把React和Vue都用上吧，反正解耦了
- 创建微应用就不使用AppWorks了,使用官网模板，再次声明icestark官网
- 微应用在Appworks里称为子应用，官网里称为微应用
- 前期没发现。可以不用云服务器，在本地跑项目，
本地服务器拿资源也可以
第一步：下载React/Vue微应用
建议：把微应用和主应用放一个文件夹，方便开发管理
下面拿React举例，Vue是一样的
npm init ice icestark-child @icedesign/stark-child-scaffold- cd到项目
- yarn 下载依赖
- yarn start 查看项目有无报错（发现没有react-router，执行
yarn add react-router -S）
发现以下（3个）报错，还是一样，暂时不管，毕竟是官方模板：
成功页面：
第二步：把微应用打包放到服务器上（自己电脑当服务器在文章末尾）
- 微应用打包后
只有一个css文件，一个js文件，把这两个文件上线，连入主应用- 之前测试连入，是借用了朋友的服务器，现在用Gitee Pages尝试（这篇文章在git&svn专栏里面）
- 总之就是把微应用上线到Gitee Pages，
尝试过后，发现不支持 ==，所以还是部署到服务器上吧- 注意：服务器一定要设置cors、之前尝试前端代理，发现不行！
部署之后，你需要这个能拿到样式的url地址（一个css的，一个js的）：
第三步，把拿到的两个url，放到主应用app.tsx对应地方
主应用里的位置：
应该说下面第一张图片对应着微应用的一级路由
微应用里：
这样访问http://localhost:3333/baseDataManage就是微应用里的Home组件（微应用的‘/’ 一级路由）
成功引入React/Vue的页面：
上面测试的是云服务器上可以，下面是本地服务器
注意：
- 把
首页放在了主应用里，暂未发现主应用默认路由怎么连入微应用- 微应用模板打包后只有一个css和一个js文件，然后连入主应用
从零搭建飞冰微前端项目《第三篇：搭建微应用》❤️相关推荐
- 从零搭建飞冰微前端项目《第一篇：优势分析》
框架选择: 基于React的飞冰渐进式研发框架(阿里开源,也叫Ice/Icejs) 微前端使用icestark微前端解决方案 UI组件库选择fusifon(企业级的中后台设计系统解决方案) 其他:ah ...
- 从零搭建飞冰微前端项目《第二篇：搭建主应用》
前提: VsCode里有AppWorks 规范: 主应用又称框架应用或基座应用,一个系统只有一个主应用.主应用应该保持职责明确,一个设计良好的主应用只做两件事情: 系统整体 Layout 的设计 所有 ...
- 2022年了你必须要学会搭建微前端项目及部署方式
一.微前端简介 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.各个前端应用可以独立运行.独立开发.独立部署. ...
- 基于qiankun搭建ng-alain15微前端项目示例实践
基础环境 实践日期:2023-03-04 ng versionAngular CLI: 15.2.1 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
- 基于qiankun搭建ng-alain15微前端项目入门实践
基础环境 实践日期:2023-02-22 ng versionAngular CLI: 15.1.6 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
- vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- 如何利用qiankun快速搭建一个微前端项目
前言 小伙伴们大家好.前一篇文章跟大家分享了一些关于微前端的知识点,包括什么是微前端,为什么要用微前端以及如何实现一个微前端,在文章的最后我们还提到了能够实现微前端的两个库:single-spa和qi ...
- vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- 使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
- 使用各种姿势舒服的部署微前端项目（上：打包与上传）
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力. 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了 ...
最新文章
- Spark ThriftServer使用的大坑
- ubuntu没有interfaces文件_ubuntu里终端中eth0为何没有显示IP地址
- RFS的web自动化验收测试——第12讲 List Variables-List变量及其用法
- 【教女朋友学网络系列3】之手把手教她明白交换机的基本原理
- mysql性能调优之配置优化_MySQL优化必须调整的10项配置
- 有哪些网站社区可以看原创平面设计大师作品?
- IOS UIView直接响应点击事件的解决方法
- Linux 上最好的视频编辑软件
- SAS入门教程1---SAS系统简介
- Java、计算税收（Java8）
- 详解如何路由器设置自动拨号上网
- 推荐使用什么样的平台表单制作工具好？
- 【一级讲解】不可思议唤来不可思议β——数学排列组合
- 百度官方：网站优化中死链处理指南与总结
- Newton迭代法求解Toeplitz矩阵逆的程序
- 文件粉碎机解决AppInit.Dlls劫持
- Word处理控件Aspose.Words功能演示：在 Java 中将 HTML 文件转换为 Word 文档
- 非旺玖原装的PL2303,请联系您的供货商
- 智慧养老之社区养老管理系统
- DRAM刷新refresh相关知识归类-基础小知识（三）