微前端qiankun，30分钟精通关键技术（上）

前端

2024-02-03 11:39:50

微前端：使用 Qiankun 构建模块化和高效的前端应用程序

简介

微前端是一种备受瞩目的技术，允许您将大型前端应用程序分解为更小、更独立的应用程序。它提升了开发效率、维护便捷性，并且非常适合复杂的大型前端应用程序。

微前端框架 Qiankun

Qiankun 是当前流行的微前端框架之一，提供了丰富的功能，简化了微前端应用程序的构建。其主要特性包括：

模块化开发： 将应用程序分解为可独立开发和维护的模块。
按需加载： 只加载当前所需的应用程序模块，减少页面加载时间和提高性能。
跨域通信： 允许不同应用程序模块之间的通信，实现数据共享和功能协作。
状态管理： 提供状态管理机制，确保数据一致性和准确性。
路由管理： 提供路由管理机制，实现页面的跳转和导航。

实战项目：微前端在线商店

为了帮助您理解 Qiankun 的实际应用，我们创建一个简单的在线商店示例，其中包含商品列表、商品详情和购物车。

创建微前端应用程序

使用以下命令创建三个微前端应用程序：

mkdir src/apps/products
cd src/apps/products
npm init

对商品详情和购物车重复此过程。

配置 Qiankun

在每个微前端应用程序中配置 Qiankun：

商品列表：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'product-detail',
    entry: '//localhost:3001',
    container: '#product-detail',
  },
  {
    name: 'cart',
    entry: '//localhost:3002',
    container: '#cart',
  },
]);

start();

商品详情：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'products',
    entry: '//localhost:3000',
    container: '#products',
  },
]);

start();

购物车：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'products',
    entry: '//localhost:3000',
    container: '#products',
  },
]);

start();

运行项目

使用以下命令运行项目：