qiankun搭建

最新推荐文章于 2023-11-02 18:50:35 发布
最新推荐文章于 2023-11-02 18:50:35 发布
阅读量700 收藏 1
点赞数
文章标签： javascript react.js 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47886687/article/details/129647462
版权

以react为主应用

1.创建项目

新建一个文件夹

create-react-app qiankun-base

create-react-app qiankun-micro-app1

create-react-app qiankun-micro-app1

在这里插入图片描述

2.安装qiankun依赖

主应用安装

npm i qiankun -S

3.给每个项目加入不同端口号

在这里插入图片描述

4.启动项目

三个都要启动
在这里插入图片描述

5.在主应用注册微应用

在入口文件index.js中配置需要的信息

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app',
    entry: '//localhost:3011',//端口号
    container: '#micro-app1',//挂载点
    activeRule: '/micro-app1',//路由
  },
  {
    name: 'vue app',
    entry: '//localhost:3012',
    container: '#micro-app2',
    activeRule: '/micro-app2',
  },
]);

start();

在这里插入图片描述

在qiankun-base\src\App.js编写挂载点

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <div id="micro-app1"></div>
      <div id="micro-app2"></div>
    </div>
  );
}

export default App;

在这里插入图片描述

6.微应用导出生命周期，使主应用能够加载

两个微应用项目在 src 目录新增 public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  /* global __webpack_public_path__:writable */
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

两个微应用中qiankun-micro-app1\src\index.js修改如下生命周期：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './public-path'

function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}

if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}

export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}

export async function mount(props) {
  console.log('[react16] props from main framework', props);
  render(props);
}


export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

7.修改webpack配置信息

功能：可以重写webpack配置信息
微应用都安装如下：

npm i react-app-rewired

然后都修改package.json
在这里插入图片描述

根目录创建config-overrides.js

在这里插入图片描述

填入：

const { name } = require('./package');

module.exports = {
  webpack: (config) => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';//采用umd方式注入
    config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;//webpack5要把 jsonpFunction，改为 chunkLoadingGlobal
    config.output.globalObject = 'window';

    return config;
  },

  devServer: (_) => {
    const config = _;

    config.headers = {
      'Access-Control-Allow-Origin': '*',//允许跨域，主应用才能使用微应用资源
    };
    config.historyApiFallback = true;
    config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;

    return config;
  },
};

再次全部启动
在这里插入图片描述

8.查看效果

在这里插入图片描述

9.主应用与子应用的通信

主应用 qiankun-base\src\index.js

在这里插入图片描述

微应用的mount中可以接收

在这里插入图片描述

10.initGlobalState

主要是测试练手，不是一定要写

主应用qiankun-base\src\index.js加入如下代码

import {
  initGlobalState,
  registerMicroApps,
  start
} from 'qiankun';

const state = {
  nickname:'主应用山竹'
}

// 初始化state
const actions = initGlobalState(state)
actions.onGlobalStateChange((state, prev) => {
  // state:变更后的状态；prev变更前的状态
  console.log(state,prev,'主应用')
})
 setTimeout(() => {
  actions.setGlobalState({
    ...state,
    age: 19
  })
}, 2000)
actions.offGlobalStateChange()

微应用qiankun-micro-app1\src\index.js修改mount做接收

export async function mount(props) {
  console.log('[react16] props from main framework', props);
  props.onGlobalStateChange((state,prev)=>{
    // state:变更后的状态；prev变更前的状态
    console.log(state,prev,'微应用')
    setTimeout(() => {
      props.setGlobalState({
        ...state,
        age: 20
      })
    }, 2000)
  })
  render(props);
}

在这里插入图片描述

11.使用vue3做微应用

1.创建微应用

npm create qiankun-micro-vue3-app3

2.安装依赖

npm i qiankun -S

3.在如上public-path文件拷贝在src,引入到mainjs

在这里插入图片描述
4. 编写mainjs

import {
    createApp
} from 'vue'
import App from './App.vue'
import './public-path'

// createApp(App).mount('#app')

let instance = null

function render(props = {}) {
    console.log(props);
    const {
        container
    } = props
    instance = createApp(App);
    instance.mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}


export async function mount(props) {
    console.log('[vue] props from main framework', props);
    render(props);
    instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;
  instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}

export async function unmount() {
    instance.unmount();
    instance.container.innerHTML = '';
    instance = null;
  }

在这里插入图片描述

在这里插入图片描述

12.react子应用接入路由

初始路由

npm install react-router-dom@6

修改主应用index.js页面

import { BrowserRouter } from 'react-router-dom'
root.render( 
<React.StrictMode >
  <BrowserRouter>
    <App / >
  </BrowserRouter>
  </React.StrictMode>
);

修改微应用index.js，注意不同微应用basename的名字

function render(props) {
  const { container } = props;
  ReactDOM.render(
    <BrowserRouter basename={window.__POWERED_BY_QIANKUN__?'/micro-app1':'/'}>
      <App />
    </BrowserRouter>
  , container ? container.querySelector('#root') : document.querySelector('#root'));
}

主应用qiankun-base\src\App.js


import { Link } from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <Link to={"/micro-app1"}>micro-app1</Link>
      <Link to={"/micro-app2"}>micro-app2</Link>
      <div id="micro-app1"></div>
      <div id="micro-app2"></div>
      <div id="micro-app3"></div>
    </div>
  );
}

效果已经可以自由切换了
在这里插入图片描述

试试创建页面

qiankun-micro-app1\src\pages\Cat\index.js

import React from 'react'

export default function Cat() {
  return (
    <div>Cat</div>
  )
}

qiankun-micro-app1\src\pages\Dog\index.js

import React from 'react'

export default function Dog() {
  return (
    <div>Dog</div>
  )
}

qiankun-micro-app1\src\App.js

import logo from './logo.svg';
import './App.css';
import { Routes,Route,Link} from 'react-router-dom'
import Cat from './pages/Cat/index'
import Dog from './pages/Dog/index'

function App() {
  return (
    <div className="App">
      微应用1
      <Link to={"/cat"}>cat</Link> |
      <Link to={"/dog"}>dog</Link>
      <Routes>
        <Route path="/cat" element={<Cat/>}/>
        <Route path="/dog" element={<Dog/>}/>
      </Routes>
    </div>
  );
}

export default App;

效果

在这里插入图片描述

13.vue3子应用接入路由

初始路由

npm install vue-router

qiankun-micro-vue3-app3\src\router\index.js

import { createRouter, createWebHashHistory } from "vue-router";
import ZoonCat from "../view/ZoonCat.vue"
import ZoonDog from "../view/ZoonDog.vue"
const routes = [
    {
        path:'/ZoonCat',
        component:ZoonCat
    },
    {
        path:'/ZoonDog',
        component:ZoonDog
    },
]

const router = createRouter({
    history: createWebHashHistory(
        window.__POWERED_BY_QIANKUN__?'/micro-app3':'/'
    ),
    routes
})

export default router

随便来两个组件

在这里插入图片描述
qiankun-micro-vue3-app3\src\App.vue

<template>
  <div>
    <router-link to="/zoonCat">zoonCat</router-link>|
    <router-link to="/zoonDog">zoonDog</router-link>
    <router-view />
  </div>
</template>

qiankun-micro-vue3-app3\src\main.js


import router from './router/index'
//。。。其他代码
function render(props = {}) {
    console.log(props);
    const {
        container
    } = props
    instance = createApp(App);
    instance.use(router)
    instance.mount(container ? container.querySelector('#app') : '#app')
}

效果

在这里插入图片描述

以vue为主应用

1.创建项目

vue2为基底

vue create vue-base

vue create app1

vue create app2

2.安装路由

全部项目都要的

 npm install vue-router@3.2.0 -S

\src\router\index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import ZoonCat from "../view/ZoonCat.vue"
import ZoonDog from "../view/ZoonDog.vue"
const routes = [
    {
        path:'/ZoonCat',
        component:ZoonCat
    },
    {
        path:'/ZoonDog',
        component:ZoonDog
    },
]
const router = new VueRouter({
    mode: 'history',
    base:window.__POWERED_BY_QIANKUN__?'app-1':'/',
    routes,
  })
  

export default router

\src\main.js（暂时这么写着）

//其他代码
import router from './router/index'

 new Vue({
    router,
    // store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');

App.vue中映射

    <router-view/>

3.安装qiankun依赖

主应用安装

npm i qiankun -S

主应用注册微应用vue-base\src\main.js

import Vue from 'vue'
import App from './App.vue'
import { registerMicroApps, start } from 'qiankun';

Vue.config.productionTip = false
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:81',
    container: '#app1',//挂载点
    activeRule: '/app-1',
  },
  {
    name: 'app2',
    entry: '//localhost:82',
    container: '#app2',
    activeRule: '/app-2',
  },
]);
// 启动 qiankun
start();

new Vue({
  render: h => h(App),
}).$mount('#app')

微应用\src\main.js配置生命周期之类的


import './public-path'
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

let instance = null;
function render(props = {}) {
  const { container } = props;

  instance = new Vue({
    router,
    //store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

主应用App.vue

<template>
  <div id="app">
    <router-link to="/app-1/ZoonCat">app1的猫</router-link>
    <br/>
    <router-link to="/app-1/ZoonDog">app1的狗</router-link>
    <br/>
    <router-link to="/app-2/ZoonCat">app2的猫</router-link>
    <br/>
    <router-link to="/app-2/ZoonDog">app2的狗</router-link>
    <div id="app1"></div>
    <div id="app2"></div>
    <router-view/>
  </div>
</template>

4.微应用src 目录新增 public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

引入mainjs

import './public-path'

如果报 error ‘webpack_public_path’ is defined but never used no-unused-vars 的错误，在app1\package.json找到eslintConfig，输入以下代码，然后重启服务。

 "eslintConfig": {
 //其他代码
    "globals": {
      "__webpack_public_path__": true
    }

  },

5.修改微应用vue.config.js

const { name } = require('./package');
module.exports = {
  devServer: {
    port: 82,//端口号
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      // jsonpFunction: `webpackJsonp_${name}`,webpack5可以不要
    },
  },
};

尝试下效果
在这里插入图片描述

6.接入vuex（传值通信，可以不学，自己看文档）

每个项目都要

npm install vuex@3

store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        username: ''
    },
    mutations: {
        changeName(state, username) {
            state.username = username
        }
    },
    actions: {
        changeName(context, username) {
            context.commit('changeName', username)
        }
    },
    modules: {}
})

main.js引入store

//其他代码
import store from './store'

new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');

主应用main.js

import { initGlobalState } from 'qiankun';

const state = {
  username: "山竹"
}
// 初始化 state
const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

store.dispatch('changeName',state.username),//这里只是通信例子，非必写

src\App.vue

{{$store.state}}

效果

在这里插入图片描述

子应用app1\src\main.js

//。。。其他代码
function storeTest(props) {
  props.onGlobalStateChange &&
    props.onGlobalStateChange(
      (value) => store.dispatch('changeName',value.username),
      true
    )
  props.setGlobalState &&
    props.setGlobalState({
      igone: props.name,
      user: {
        name: props.name
      }
    })
}

export async function mount(props) {
  console.log('[vue] props from main framework', props);
  storeTest(props)
  render(props);
}

效果
在这里插入图片描述

山竹回家了
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
零基础带你基于vue2架构搭建qiankun父子项目微前端架构
ll123456789_的博客
06-26 668
然后在主应用vue-qiankun-base的运行端口访问 app1路由 (可以直接在浏览器后面拼接/app1)我们在子应用 vue-qiankun-app1 src目录下创建一个public-path.js。然后更改 vue-qiankun-app1子应用 的 vue.config.js。我们打开vue-qiankun-base主应用的根节点 App.vue。然后这时 我们来运行我们的基座项目 vue-qiankun-base。然后我们将子应用 vue-qiankun-app1项目运行起来。
qiankun微前端简单使用
weixin_42116924的博客
07-29 912
引入qiankun组件 配置路由 子应用： 配置子应用的单独运行和配合qiankun运行 重点：子应用vue.config.js中需要的配置如下 参考：文章参考：
qiankun保姆级教程（React）
qq_52839794的博客
11-02 1970
微前端qiankun的使用，从零到搭起整个应用的全步骤，以及各应用间的通信方式，细节满满干货满满
微前端 qiankun搭建示例
dawnli1014的博客
04-27 781
1.准备 安装vue-cli3及以上
qiankun-vue3-微前端入门
m0_44963501的博客
11-11 1095
微前端 vue3 qiankun
qiankun-template:基于qiankun搭建的前端微服务项目
05-03
基于qiankun搭建的前端微服务项目 qiankun 项目实际搭建， 及各种微应用流行框架技术 的配置; vue2.x vue3.x react16 umi2 + dva umi3 + dva 初衷：自己当时摸索qiankun构建项目时，问题百出， 特别是umi2 及 umi3，...
vue+qiankun搭建的简单工程
02-27
vue+qiankun搭建的简单工程 适合初次接触qiankun，使用vue的小伙伴 import "./qiankun/public-path"; import Vue from "vue"; import VueRouter from "vue-router"; import ElementUI from "element-ui"; import ...
microAppMain:antd pro of vue + qiankun搭建的主应用
05-29
microAppMainantd pro of vue + qiankun，子应用请参考账号：admin/admin安装依赖npm install开发模式运行npm run serve编译项目npm run buildLints and fixes filesnpm run lint
qiankun-angular-angularjs:基于 qiankun，主应用为 angular，子应用为angularjs
05-29
QiankunAngularAngularjs基于qiankun,实现了在angular9主应用下挂angularjs子应用的范例。可实现angularjs和angular9优雅共存，增量迁移。本工程只是对qiankun官网样例的补充，如果想要详细了解qiankun请访问官网：...
qiankun基座 mainApp
01-30
【描述】"qiankun基座" 提示我们这个项目的核心是用于搭建和管理子应用的基础架构。基座通常包含全局状态管理、路由管理、公共脚本注入等功能，确保子应用能够无缝地在主应用中运行。这里的"mainApp"可能是指主应用...
微前端框架qiankun应用及部署
qq_28223305的博客
01-04 1809
微前端qiankun
从0到1构建一个qiankun项目
Gorgio_Liu的博客
05-15 1250
本教程适合刚接触qiankun的新人，介绍了如何从0构建一个qiankun项目 1、首先创建一个主应用 主应用不限技术栈，react或者vue都可以，只需要提供一个容器DOM，然后注册微应用并start开始 先安装qiankun： yarn add qiankun // 或者 npm i qiankun -S 我是以react作为主应用的，首先注册微应用并启动。 // 在主应用的src下的index.js 里面注册微应用并启动 import React from 'react'; impo
微前端：使用qiankun框架的注意点
Big_YiFeng的博客
10-11 769
解决方案： 使用 vite-plugin-qiankun 包，暂未使用过，不过看有部分人是使用的这个。第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。初始化完成后进入默认的子应用。
关于qiankun的使用与部署过程，全详细记录
我的Object Lift
12-22 6520
1.安装qiankun qiankun的官网qiankun - qiankun 安装过程 $ yarn add qiankun # or npm i qiankun -S 主应用安装，子应用不需要安装； 2.主应用qiankun配置内容； vue -template -admin作为本次记录的主体； 新建micro.js 在一下代码段中，将按照qiankun的配置模式，为主应用配置加载的主应用内容； /** * qiankun 模式 * 子系统构建主控文件 ...
基于微前端qiankun的多页签缓存方案实践
vivo互联网技术
08-02 4831
本文梳理了基于阿里开源微前端框架qiankun，实现多页签及子应用缓存的方案，同时还类比了多个不同方案之间的区别及优劣势，为使用微前端进行多页签开发的同学，提供一些参考。
微前端架构
热门推荐
woyebuzhidao321的博客
03-27 2万+
一、前端(架构)发展史 最初，前端是没有架构的，因为功能简单的代码没有架构可言。通过操作DOM就能完成的工作，不需要复杂的设计模式和代码管理机制，也就不需要架构来支撑起应用。前端开发的发展历史分为以下几个阶段： ● 古典时期。由后端渲染出前端 HTML，用 Table 布局，用 CSS 进行简单的辅助。 ● 动效时期。前端开始编写一些简单的 JavaScript 脚本来做动画效果，如轮播广告。 ● Ajax 异步通信时期。2005年，Google 在诸多 Web 应用中使用了异步通信技术如 Google 地
微前端qiankun从搭建到部署
Zhu_hualong的博客
03-29 2423
basic-vue-app–（vue3基座应用）micro-vue2-app–（vue2微应用）micro-vue3-app–（vue3微应用）micro-react-app–（react微应用）
微前端qiankun（vue）创建项目教程
qq_38814363的博客
02-09 1235
什么是微前端，乾坤（qiankun）创建项目
从零搭建qiankun
haluodepaopao的博客
10-14 382
在说qiankun之前先了解下Single-spa ,Single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 使用 single-spa 进行前端架构设计可以带来很多好处，例如: 在同一页面上使用多个前端框架 而不用刷新页面 (Vue,React, AngularJS, Angular, Ember, 你正在使用的框架) 独立部署每一个单页面应用 新功能使用新框架，旧的单页应用不用重写可以共存 改善初始加载时间，迟加载代码 qiankun 是一个基于 singl
qiankun angularjs
最新发布
11-22
总的来说，千葵AngularJS是一个功能强大，易用灵活的前端框架，它为开发者提供了丰富的工具和功能，帮助他们快速搭建和开发复杂的Web应用。它已经被广泛应用于各种类型的项目，并且得到了开发者和用户的广泛好评。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值