qiankun-微前端初体验

最新推荐文章于 2024-07-29 19:15:35 发布

前端程序猿dzf

最新推荐文章于 2024-07-29 19:15:35 发布

阅读量2k

点赞数 1

分类专栏：前端干货 vue技术教程文章标签： vue.js reactjs

本文链接：https://blog.csdn.net/qq398577351/article/details/108078660

版权

本文介绍了微前端的概念及其核心价值，如技术栈无关、独立开发部署、增量升级和独立运行时。通过qiankun库，详细阐述了如何创建基座项目，以及分别创建并配置Vue和React微项目，实现它们在基座项目中的独立运行和加载。最后，简要说明了启动项目进行测试的步骤。

摘要由CSDN通过智能技术生成

文章目录

1、微前端

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。

目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

2、什么是微前端

微前端架构具备以下几个核心价值：

2.1技术栈无关

主框架不限制接入应用的技术栈，微应用具备完全自主权

2.2独立开发、独立部署

微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

2.3增量升级

在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

2.4独立运行时

每个微应用之间状态隔离，运行时状态不共享

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

3、初步简单使用介绍

3.1 首先创建基座项目，即顶层项目，用来包裹各个微项目。

用vue-cli创建个项目做基座。
直接用npx安装 npx可拉取最新的命令 @vue/cli去安装而不用把cli放在本地
1、npx @vue/cli qiankun-base
2、创建初始模板项目（需要路由）
3、安装qiankun库： yarn add qiankun
4、修改main.js
main主要是使用 registerMicroApps, start 方法，配置加载的微项目，按格式配置。

import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
import {
    registerMicroApps, start } from 'qiankun';
const apps = [
    {
   
        name: 'vueApp',
        entry: '//localhost:10002', // 默认会加载这个html 加载里面js 动态执行 必须支持跨域
        container: '#vue', // 容器名
        activeRule: '/vue', // 激活路由
    },
    {
   
        name: 'reactApp',
        entry: '//localhost:20000', // 默认会加载这个html 加载里面js 动态执行 必须支持跨域
        container: '#react',
        activeRule: '/react',
    },
];
registerMicroApps(apps);
start({
   
	prefetch: false // 取消预加载
});
Vue.use(ElementUI);
new Vue({
   
    router,
    render: h => h(App),
}).$mount('#app');

5.修改App.vue
设置好微项目的插座，用于加载对应dom显示微项目

<template>
  <div>
    <el-menu :router="true" mode="horizontal">
      <!-- 基座自己的路由 -->
      <el-menu-item index="/">Home</el-menu-item>
      <el-menu-item index="/vue">vue应用</el-menu-item>
      <el-menu-item index="/react">react应用</el-menu-item>
    </el-menu>
    <!-- 默认路由 -->