微前端之qiankun上手实践：告别应用孤岛，拥抱协作开发

前端

2023-04-14 23:49:58

微前端：使用 qiankun + Vue2 构建可扩展的应用

模块化前端架构

随着前端应用变得日益复杂，单体应用架构不再能满足需求。微前端作为一种创新的前端架构模式，应运而生。微前端将应用拆分成独立的模块，就像搭积木一样，这些模块可以独立开发、部署和维护，最终组合成一个完整的应用。

微前端的优势

模块化开发： 促进不同团队并行开发，提高开发效率。
独立部署： 降低耦合性，提高系统可用性和稳定性。
技术异构： 允许每个模块采用不同的技术栈，支持技术选型的灵活性。
重用性： 模块之间的相互调用和复用，减少代码重复。
渐进迁移： 允许老系统与新系统共存，降低改造难度。

qiankun 简介

qiankun 是一个基于 Vue 的微前端框架，它提供了一套完善的微前端解决方案，涵盖模块加载、路由管理、状态管理、通信机制等，帮助开发者快速构建微前端应用。

qiankun + Vue2 实践

1. 搭建主应用

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

// 路由配置
const routes = [
  {
    path: '/',
    component: () => import('./Home.vue'),
  },
  {
    path: '/sub',
    component: () => import('sub-app/SubApp.vue'),
  },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 创建 Vue 实例
const app = createApp({});
app.use(router);
app.mount('#app');
</script>

2. 搭建子应用

<template>
  <div>
    <h1>Sub App</h1>
    <p>This is a sub app.</p>
  </div>
</template>

<script>
export default {
  name: 'SubApp',
};
</script>

3. 集成 qiankun

import { createApp } from 'vue';
import { mount } from 'qiankun';

// 创建 Vue 实例
const app = createApp({});

// 集成 qiankun
mount({
  // 子应用的名称，请尽量使用其域名或 URL
  name: 'sub-app',
  // 子应用的入口文件
  entry: 'http://localhost:7001/sub.js',
  // 子应用的容器元素
  container: '#sub-app',
});

// 挂载 Vue 实例
app.mount('#app');