# micro-front-template

**Repository Path**: LenGxinLove/micro-front-template

## Basic Information

- **Project Name**: micro-front-template
- **Description**: 微前端实践
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-08-18
- **Last Updated**: 2021-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于 qiankun 的微前端实践项目
## 什么是微前端
> 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

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

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

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

- 增量升级

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

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

## 引言

本文是基于 `qiankun` 的微前端最佳实践系列新手入门教程，本文将分享如何使用 qiankun 如何搭建主应用基座，然后接入不同技术栈的微应用，完成如何从 0 构建一个 qiankun 微前端项目。

本教程采用 Vue 作为主应用基座，接入不同技术栈的微应用，接入 `多技术栈` 微应用

## 入门教程
### 1. 构建主应用

主应用不限技术栈，只需要提供一个 `容器` DOM，然后注册微应用并 start 即可

这里我们先使用 vue-cli 生成一个 Vue 的项目，初始化主应用:

- 安装 `qiankun` 、[import-html-entry](https://github.com/kuitos/import-html-entry)
  ```
  $ yarn add qiankun # 或者 npm i qiankun -S
  ```
- 注册微应用
  ```js
  // app-main/src/registerMicro
  registerMicroApps(apps, {
    // qiankun 生命周期钩子 - 微应用加载前
    beforeLoad: app => {
      console.log("before load", app.name);
      return Promise.resolve();
    },
    // qiankun 生命周期钩子 - 微应用挂载后
    afterMount: app => {
      console.log("after mount", app.name);
      return Promise.resolve();
    }
  });
  ```
- 启动
  注册好微应用后，直接 `start` 启动就可以看到效果

  ![image](./app-main/src/assets/main.png)

### 2.接入微应用