“乾坤”通常指的是乾坤(qiankun)微前端框架,这是一个基于single-spa的微前端实现方案。在Vue3中,使用乾坤可以将多个独立的前端应用集成到一个统一的页面中,每个应用可以独立开发、独立部署,并且使用不同的技术栈。 2. Vue3中如何使用“乾坤”进行微前端集成 在Vue3中使用乾坤进行微前端集成,主要步骤包括在主应用...
第一步:Default是自动安装,在这里我选择最后一个手动安装,按下回车键进行选择 第二步:Vue-cli3.x 将提供以下特性供选择,可以根据项目需要进行选择添加的配置项,使用空格键来选中,熟练使用TS的可以选择TypeScript*Babel:使用babel,便于将我们源代码进行转码(把es6=>es5) *TypeScript:使用TypeScript进行源码编写,使用...
第一步、创建vue3的项目与正常创建项目无异,在这里不做过多描述; 第二部、将创建好的vue3项目作为主应用,在根目录先安装qiankung yarn add qiankun # 或者 npm i qiankun -S 1 第三步、修改src目录下面的main.js import { createApp } from 'vue' import App from './App.vue' import router from ...
// 1. 引入乾坤import qiankun from 'vite-plugin-qiankun' // 2. composePlugins方法中添加qiankun('vue-child', {useDevMode: true}), 重点mainjs配置 参考 import { createApp } from 'vue'import App from './App.vue'import router from './router'// pinia 仓库import { registerStore, useAppS...
乾坤微服务架构是一种基于Vue3的微服务架构,适合用于项目庞大或多个项目集成的场景。通过搭建乾坤微服务架构,可以统一管理新老项目,便于集成维护和迭代升级。一、创建项目首先,我们需要创建基座和子应用。基座是整个微服务架构的核心,负责统一登录、错误拦截等功能。子应用则是具体的业务模块,可以基于Vue或React等框架开发。
记录qiankun 结合vue3搭建项目 环境 脚手架选择4.5.12 cli版本过高会导致重写webpack时报错。 主应用和微应用均采用的vue3+ts。(ts会检测类型错误,在文件顶部加如下代码) /* eslint-disable */ // @ts-nocheck 1. 2. 主应用下载qiankun 微应用无需下载依赖(npm install qiankun -s),主应用与微应用的路...
import Vue from 'vue'; import router from "@/router"; import App from "@/App"; let instance = null export const render = () => { instance = new Vue({ router, render: h => h(App) }).$mount('#child1Root'); } /** * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重...
3、打包配置修改(vue.config.js)。如下图:4、子应用接受主应用的传值 a、在子应用的main.js中调用app-store.js的appStore方法。b、appStore的具体处理。接受保存供子应用使用5、微应用打包之后css 中的字体文件和图片加载 404 官方地址:https://qiankun.umijs.org/zh/faq#微应用打包之后css中的字体文件和...
1、vue3的App.vue中引用乾坤上的registerMicroApps、start方法,registerMicroApps中引入子应用的注册信息 2、主应用路由改造。hash模式下不支持设置路由的base,需要额外新建一个空的路由页面,将其他所有路由都作为它的children。/sub-app 就是用于匹配子应用路由,children中path: '/:w+',为了匹配其后的所有子路由,vu...
第一步、在主应用examples目录下创建一个vue3的项目,创建流程正常创建vue3项目无异,在这里不做过多描述; 第二步、在新创建的vue项目的src文件中创建名为public-path.js 的js文件,如图所示: public-path.js文件代码如下: 第三步、入口文件 main.js 文件代码修改如下: ...