乾坤项目学习总结

什么是乾坤

通俗点讲乾坤就是在一个项目里面套另一个项目,一个项目在另一个项目框架里运行(有点像iframe了,为什么不用后面附官网);两个项目可以是不同的框架、技术实现,前者项目我们叫主应用,后者叫子应用,然后我们还需要创建一个微应用项目

主应用

1、安装qiankun依赖

复制代码
npm i qiankun -S

2、注册微应用

复制代码
import { registerMicroApps, start } from 'qiankun';

// 可以配置多个子应用
registerMicroApps([
  {
    name: 'reactApp', // 应用名称
    entry: '//localhost:3000', // 子应用地址(这里就需要一个动态环境变量地址,用于区分开发环境)
    container: '#container', // 子应用需要套在主应用哪里(这里表示id为container的标签下面)
    activeRule: '/app-vue/xx', // 主应用匹配规则(子应用路由后面的路径)
  }
]);
// 启动 qiankun
start();

微应用

然后就是微应用的一些配置了(不需要安装qiankun),具体配置就不写了,如果要调试子应用在主应用里面的效果(刚开始可以单独运行子应用进行开发调试,但后续还需要测试嵌套效果,肯定会存在一些bug),需要启动该项目。

附上乾坤官网地址入口,更多乾坤问题自行百度

相关推荐
浅水壁虎1 小时前
vue基础(第四章 Pinia)
前端·javascript·vue.js
学习星球2 小时前
Vue 3 实战:拆解 RealWorld 项目
前端·vue.js
大家的林语冰4 小时前
👉 尤雨溪再次成立新公司,同时官宣 Pinia 4 正式发布!
前端·javascript·vue.js
栀鸢ouo6 小时前
解决Element Plus表格展开行横向溢出、滚动截断问题(项目实战方案)
前端·vue.js
今天吃了嘛o6 小时前
Vue3中封装高德地图使用
前端·vue.js·typescript
OpenTiny社区7 小时前
TinyVue v3.31 版本更新:新组增件 + 文档优化,多项实用能力升级
前端·vue.js
Sterting9 小时前
Element-Plus 入门与整体布局
前端·vue.js·elementui
宿6741 天前
vue3-env环境
前端·vue.js
汉堡大王95271 天前
Vue 3 + TS + Element Plus 实战:如何从零搭建企业级违章记录管理 SaaS 前端
前端·javascript·vue.js
障碍的枫子1 天前
Vue组件导出&渲染
前端·javascript·vue.js