【前端】microApp微前端搭建简单Demo 创建项目 第一步,创建项目,分别创建base_app(主基座)、a_app(子项目1) 配置主基座项目 Main.js中引入@Micro-zoe/micro-app //main.jsimportmicroappfrom'@micro-zoe/micro-app'microapp.start() 在页面中加入<micro-app>标签 <micro-appname='a_app'url='http://loc...
3.1. 主应用向子应用发送消息—— 通过EventCenterForMicroApp 首先主应用需要创建EventCenterForMicroApp对象 //@ts-ignore 因为vite子应用关闭了沙箱,我们需要为子应用appname-vite创建EventCenterForMicroApp对象来实现数据通信 // 这个name 就是<micro-app :name="name" /> 上的name值 import { EventCenterForMicr...
micro-app-demo 介绍 一个微前端的测试实例 软件架构 软件架构说明 安装教程 xxxx xxxx xxxx 使用说明 xxxx xxxx xxxx 参与贡献 Fork 本仓库 新建Feat_xxx 分支 提交代码 新建Pull Request 特技 使用Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md Gitee 官方博客 blog.gitee.com 你可...
首先第一步就是先创建一个文件夹 ,如下图所示,我这边新建了一个叫micro-app-demo的文件夹,用webStrom打开,效果如下图所示: 1-2、创建vue项目 接下来就是创建vue,这个命令之前装single-spa的时候就遇到过,让我升级vue3。
在main.ts中,需要将microApp启动,以及一些全局配置,都可以放在启动逻辑中。 AI检测代码解析 import'./assets/main.css'import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'importrouterfrom'./router'importmicroAppfrom'@micro-zoe/micro-app'importElementPlusfrom'element-plus'impo...
首先我们先建立一个干净的空文件夹,名字为micro-app-demo,通过VSCode进入这个目录。 主服务my-app的构建 通过脚手架create-react-app创建一个React项目,并启动 AI检测代码解析 npx create-react-app my-app cd my-app npm start 1. 2. 3. 启动成功,可以看到主服务地址http://localhost:3000。
micro-app 在线体验地址:https://zeroing.jd.com/micro-app/demo/react16
https://github.com/micro-zoe/micro-app-demo 主应用配置 1. 主应用安装插件 yarn add @micro-zoe/micro-app pnpm add @micro-zoe/micro-app npm i @micro-zoe/micro-app 2. 在应用入口main.js 中引入并启动micro-app。 import microAppfrom'@micro-zoe/micro-app'microApp.start({destroy:true}) ...
micro-app-demo 作为micro-app的案例仓库,举例了react,vue,angular,nextjs,nuxtjs,vite如何作为主应用和子应用接入微前端,并在尽可能改动少量的代码的情况下做出尽可能完善的功能。 micro-app-demo中所有项目都是使用官方脚手架创建的,它们足够精简,你完全可以将其中的demo作为基础进一步开发自己的项目。
68030f6· Jan 4, 2024 History2 Commits packages init Jan 4, 2024 .gitignore init Jan 4, 2024 README.md Initial commit Jan 4, 2024 package.json init Jan 4, 2024 pnpm-lock.yaml init Jan 4, 2024 pnpm-workspace.yaml init Jan 4, 2024 Repository files navigation README micro-app-demoAbo...