在Vue2项目中搭建微前端MicroApp可以通过以下步骤实现: 1. 创建Vue2项目 首先,你需要创建一个Vue2项目。如果你还没有安装Vue CLI,可以使用以下命令进行安装: bash npm install -g @vue/cli 然后,创建一个新的Vue2项目: bash vue create my-vue2-app 按照提示选择Vue 2作为项目的版本。 2. 安装MicroApp...
1. 第一步,创建2个vue3+vite项目 创建【main-vue3-app】主系统,以及【child-vue3-app】子系统。 然后就是安装 vue-router、sass依赖,里面代码敲敲敲,再把主、子系统跑起来。 ps: 主系统访问ip端口:http://127.0.0.1:1111/ 子系统访问ip端口:http://127.0.0.1:2222/child-vue3/ 好,第一步把这个基石...
<micro-app name="my-app-page1"url="http://localhost:5173/stand"disableSandbox inline></micro-app> </template> 子应用配置 1. 路由配置 path是子应用路由地址。非严格匹配,/login/*都指向SubApp页面。使用vue-router@4.x时写法为:'/login/:page*'。 注:推荐基座使用history路由,Vite子应用使用has...
在正式开始之前,我们需要搭建一个开发环境,创建一个代码仓库simple-micro-app。 目录结构 代码仓库主要分为src主目录和examples案例目录,vue2为基座应用,react17为子应用,两个项目都是使用官方脚手架创建的,构建工具使用rollup。 两个应用页面分别如下图: 基座应用 -- vue2 子应用 -- react17 在vue2项目中,...
micro-app 是一种基于 Web Components 规范的微前端解决方案。它提供了一种简洁而高效的方式来将多个子应用集成到一个主应用中,就像使用普通的 HTML 标签一样。micro-app 具有以下几个显著特点: 技术栈无关性:无论是 Vue、React 还是其他前端框架,micro-app 都能很好地支持。各个子应用可以根据团队的技术偏好自由...
Micro App react16应用 react17应用 vue2应用 vue3应用 vite应用 angular11应用 多个应用 自带页面Serati Ma 发送数据 home page2 Vue@2.6.14 Welcome to Your Vue.js App {"from":"来自基座的初始化数据"}
npm install -g vue-cli # 使用vue2-cli创建vue2+element子应用 vue create my-subapp 注意:子应用中应使用vue2来开发,因为vue2和vue3不兼容。 二、配置主应用 1. 安装micro-app: yarn add micro-app 2. 修改App.vue: <template>Microapp - Vue3 Main<router-linkto="/">Home</router-link><router...
Vue 2作为一种常用的前端框架，具有组件化的特性，适合进行微前端开发。在Vue 2的微前端应用中，每个子应用的功能可以是独立的模块，通过接口与主应用进行交互。开发一个职位列表作为子应用，意味着我们将为主应用提供一个独立的职位数据展示功能，而这个功能的前端交互、样式和状态管理完全由子应用独立处理。1.2 子...
PC统一使用react,但是有一些老的项目是vue的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此想借助本次机会用react开发,经过了几番思考,发现本次很适合用微前端来完成本次需求,最终决定用react搭建一个基座(主应用),将原来的vue项目接入到基座,这样不仅实现了新页面react开发,而且老项目也能和新...
Open opened this issueJan 18, 2022· 1 comment senrocommentedJan 18, 2022• edited Collaborator gongshuncommentedJan 18, 2022 vue-router 有 abstract 模式,但是不能用MicroAppWithMemoHistory标签,需要用手动加载的方式 👍1cuijiudai reacted with thumbs up emoji ...