* @FilePath: \microApp_demo\vite_vue3_main\src\components\HeaderNav.vue * @Description: HeaderNav --> <template>
2. 导入并启用微前端框架 microApp src/main.ts AI检测代码解析 import microApp from '@micro-zoe/micro-app' microApp.start() 1. 2. 3. 3. 添加配置 vite.config.ts 的 vue 中添加配置 AI检测代码解析 vue({ template: { compilerOptions: { isCustomElement: (tag) => /^micro-app/.test(tag)...
qiankun，出身名门的微前端，基于single-spa来实现的，但是把那些繁杂的配置包装一层，使其简单易用，但是它没想到vite的出现，所以对于vite+vue3来说配置需要踩得坑太多了，险些爬不起来。。。micro-app、今天的主角，借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComp...
微应用micro-vue-app(vue3+vite) qiankun目前是不支持vite的,需要借助插件完成 安装vite-plugin-qiankun 代码语言:javascript 代码运行次数:0 运行 AI代码解释 npm install vite-plugin-qiankun 修改vite.config.js 代码语言:javascript 代码运行次数:0 运行 AI代码解释 import { defineConfig } from 'vite' impor...
第一步:创建一个vite+vue3的父工程项目 npm init vite-app micro-app-vite-vue3.0 第二步:安装micro-app的依赖 npm i @micro-zoe/micro-app --save 第四步:main.js中引入插件,并开启 import microApp from '@micro-zoe/micro-app' microApp.start() 第五步:父工程配置路由(非严格匹配写法:pathMa...
import "ant-design-vue/dist/antd.variable.min.css"; import "virtual:windi.css"; // windi Css import App from "./App.vue"; let instance = null; type AppProps = Partial<MicroAppStateActions & QiankunProps>; function render(props: AppProps) { const { container } = props; if (contain...
container 是容器应用,app1 是 Vue 子应用,app 2 是 React 子应用 container 应用的核心代码是 MicroApp 组件,该组件会在 mounted 时加载子应用的 entry container 本身是用 Vue 3 实现的,引入了 Vue Router,它会根据路由来切换显示不同的 MiscroApp 组件 开发模式下,entry 为子应用的 main.tsx;build 模式下...
更新microapp版本 7个月前 s.yml config 8个月前 vite.config.js 中转路由, MicroApp组件封装 8个月前 yarn.lock vite模版项目 2年前 README Vue 3 + Vite Recommended IDE Setup Vue 3 + Vite This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3SFCs...
在App.vue挂载微应用节点 AI检测代码解析 1. 2. 微应用micro-vue-app(vue3+vite) qiankun目前是不支持vite的,需要借助插件完成 安装vite-plugin-qiankun AI检测代码解析 npm install ...
activeRule:'/#/vue3', loader }, ]; registerMicroApps(MicroConfig, {//qiankun 生命周期钩子 - 微应用加载前beforeLoad: (app: any) =>{ console.log("before load+++++", app.name);returnPromise.resolve(); }, beforeMount: (app: any)=>{ console.log...