Qiankun微前端框架原理、使用和实践详解

Qiankun微前端框架原理、使用和实践详解 第一张

Qiankun微前端框架

Qiankun是一款开源的微前端框架,它可以帮助开发者快速构建出多个子应用,并能够在一个页面中实现子应用的聚合和切换。它是基于Vue、React、Angular等框架的,可以支持多种前端技术栈,让开发者可以自由选择技术栈,实现前端的多元化发展。

Qiankun的原理

Qiankun采用了模块化的设计思想,将一个大的前端应用拆分成多个独立的子应用,每个子应用都是一个单独的模块,可以运行在不同的环境中,并可以被其他应用调用。Qiankun的核心原理是通过一个主应用(也叫主线程)来管理所有的子应用,它负责加载和卸载子应用,并在子应用之间实现路由切换,从而实现子应用的聚合和切换。

Qiankun的使用

Qiankun的使用非常简单,只需要按照官方文档的步骤,就可以快速构建出子应用,并实现子应用的聚合和切换。

1. 安装Qiankun

需要安装Qiankun,可以使用npm或者yarn来安装:

npm install qiankun --save

2. 初始化Qiankun

安装完成后,需要在入口文件中初始化Qiankun,可以使用如下代码:

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8080',
    container: '#subapp-viewport',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8081',
    container: '#subapp-viewport',
    activeRule: '/app2',
  },
]);

start();

3. 注册子应用

需要注册子应用,可以使用registerMicroApps()方法,它接受一个数组,里面包含了所有的子应用信息,比如:

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8080',
    container: '#subapp-viewport',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8081',
    container: '#subapp-viewport',
    activeRule: '/app2',
  },
]);

4. 启动Qiankun

需要调用start()方法来启动Qiankun,它会根据注册的子应用信息,加载和卸载子应用,实现子应用的聚合和切换:

start();

Qiankun的实践

Qiankun的实践非常简单,只需要按照官方文档的步骤,就可以快速构建出子应用,并实现子应用的聚合和切换。

1. 创建项目

需要创建一个新的项目,可以使用vue-cli或者create-react-app来创建,比如:

vue create my-project

2. 安装Qiankun

需要安装Qiankun,可以使用npm或者yarn来安装:

npm install qiankun --save

3. 配置Qiankun

安装完成后,需要配置Qiankun,可以在入口文件中添加如下代码:

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8080',
    container: '#subapp-viewport',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:8081',
    container: '#subapp-viewport',
    activeRule: '/app2',
  },
]);

start();

4. 启动项目

可以使用npm或者yarn来启动项目:

npm run serve

Qiankun是一款开源的微前端框架,它可以帮助开发者快速构建出多个子应用

© 版权声明
THE END
分享