在Vue3项目中使用micro-app进行微前端开发,可以遵循以下步骤: 1. 安装micro-app 首先,你需要在主应用(基座应用)中安装micro-app。你可以使用npm、yarn或pnpm进行安装: bash npm install @micro-zoe/micro-app --save # 或者 yarn add @micro-zoe/micro-app # 或者 pnpm add @micro-zoe/micro-app 2. 在...
* 当前vue-router版本:4.0.12*/functionfixBugForVueRouter4(router: Router) {//判断主应用是main-vue3或main-vite,因为这这两个主应用是 vue-router4if(window.__MICRO_APP_ENVIRONMENT__) {//if (window.location.href.includes('/main-vue3') || window.location.href.includes('/main-vite')) {/...
npm i @micro-zoe/micro-app --save 1. 2. 导入并启用微前端框架 microApp src/main.ts import microApp from '@micro-zoe/micro-app' microApp.start() 1. 2. 3. 3. 添加配置 vite.config.ts 的 vue 中添加配置 vue({ template: { compilerOptions: { isCustomElement: (tag) => /^micro-app...
* @FilePath: \microApp_demo\vite_vue3_main\src\components\HeaderNav.vue * @Description: HeaderNav --> <template>
但是父应用中监听router变化不触发 import { useRouter} from 'vue-router' const router = useRouter() watch( () => router.currentRoute.value, (newValue: any) => { console.log('newValue',newValue) }, { immediate: true } ) 我需要在路由变化的时候去改变菜单的选中状态,请问如何解决...
PC统一使用react,但是有一些老的项目是vue的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此想借助本次机会用react开发,经过了几番思考,发现本次很适合用微前端来完成本次需求,最终决定用react搭建一个基座(主应用),将原来的vue项目接入到基座,这样不仅实现了新页面react开发,而且老项目也能和新...
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 快速开始 1. 基座应用 //初始化一个vue应用vue create main-vue//安装 @micro-zoe/micro-app 依赖npm i @micro-zoe/micro-app --save// 入口添加 // main.jsimport Vue from "vue";import App from "./...
MicroApp 的接入成本低、兼容性高、性能强是我们选择MicroApp作为微前端框架使用的重要因素~ 快速开始 主应用-React 架构图 1、项目准备 1.1 创建项目 创建主应用项目:npx create-react-app react18 创建子应用项目-react:npx create-react-app react18 创建子应用项目-vue3:vue create vue3 1.2 安装相关依赖 ...
import { useRouter } from "vue-router";export default { setup() { const state = reactive({ microApp_ifs: null, microApp_pis: null, microApp_tms: null, data: [], ifs: 0, pis: 0 }); const route = useRouter(); watch(() => route.currentRoute.value.path, (count, prevCount) ...
但是我们有一些老的项目是 vue 的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此我们想借助本次机会用 react 开发,经过了几番思考,发现本次很适合用微前端来完成本次需求,最终决定用 react 搭建一个基座(主应用),将原来的 vue 项目接入到基座,这样我们不仅实现了新页面 react 开发,而且老...