我们可以使用create-react-app、Vue CLI或Angular CLI等脚手架工具快速创建这些项目。 创建qiankun壳接下来,我们需要创建一个qiankun壳。这个壳是一个单页面应用,它将作为其他子应用的容器。我们可以使用qiankun提供的命令行工具快速创建一个壳。在壳中,我们需要引入qiankun的配置文件和启动代码。 集成子应用最后,我们...
import "./qiankun" 在App.vue挂载微应用节点 代码语言:javascript 复制 微应用micro-vue-app(vue3+vite) qiankun目前是不支持vite的,需要借助插件完成 安装vite-plugin-qiankun 代码语言:javascript 复制 npm install vite-plugin-qiankun 修改vite.config.js 代码语言:javascript 复制 import { defineConfig }...
微应用micro-react-app(react18+vite) 跟vue配置一样 但是会报这个错误 解决,在vite.config.js删除react() import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import qiankun from 'vite-plugin-qiankun' expor...
// react main.ts 无关代码自行省略 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; // vite-plugin-qiankun helper import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'; function render(props: ...
}from"vite-plugin-qiankun/dist/helper";// some coderenderWithQiankun({mount(props){console.log("mount");render(props);},bootstrap(){console.log("bootstrap");},unmount(props:any){console.log("unmount");const{container}=props;constmountRoot=container?.querySelector("#root");ReactDOM....
import{QianKunPropsType}from"./main"; import{ BrowserRouter, Routes, Route, NavLink, HashRouter, }from"react-router-dom"; importHomefrom"./Home"; importAboutfrom"./About"; functionApp(props:QianKunPropsType){ const{base,mode}=props; ...
1.通信机制:qiankun提供了`initGlobalState`方法和`onGlobalStateChange`方法来进行全局状态管理和跨应用通信,可以在不同的微应用之间共享状态或进行数据传递。 2.鉴权和路由:qiankun可以配合使用Vue Router、React Router等路由库,实现各个微应用的鉴权和路由控制,以便实现不同权限的用户访问不同的微应用。 3.样式隔...
plugins Vite 插件数组，包含 React、Qiankun、TypeScript 校验、Gzip 压缩、HTML 模板、SVG 图标转换和 Comlink。worker 定义 Web Worker 插件，使用了 Comlink 插件。optimizeDeps 配置优化依赖项的选项，使用了 esbuild。css 配置 CSS 预处理器和 PostCSS 插件。使用了 SCSS 和 Less 预处理器以及 Autoprefixer 插件...
Github上有一名开源作者开发了一款Vite插件叫vite-plugin-qiankun,通过这个插件可以在qiankun下走通这两种模式。甚至保留了vite构建模块的优势 修改Vite.config.js 2. 修改子应用的main.ts,将生命周期mount、bootstrap、unmount等通过插件函数renderWithQiankun在其中暴露完成。其他配置与基于webpack构建的子应用相同 ...
与Vue 解耦,兼容支持 React、Svelte、Preact、Vanilla 等,这意味着 Vite 可以被应用在大多数现代技术栈中 与Rollup 极其接近的插件接口,这意味着可以复用 Rollup 生态中大部分已经被反复锤炼的工具 说真的,这两条摆上桌面,加上前面讨论的性能优势和超低学习成本,一时半会真想不到拒绝的理由了。。。