在vue项目上使用阿里qiankun ——项目搭建篇（一）

什么是微前端

简单来说就是
1、复用（嵌入）别人的项目页面，但是别人的项目运行在他自己的环境之上。
2、巨无霸应用拆分成一个个的小项目，这些小项目独立开发部署，又可以自由组合进行售卖

本文主要讲解如何在vue项目上使用阿里的qiankun插件进行微前端实践，对微前端的概念会在另外的文章中进行阐述，demo会附在文末。

首先我准备了三个项目、分别是主应用main-app、子应用b-child、c-child。三个应用均是采用Vue技术栈，路由均是采用history模式

改造主应用main-app

1、首先需要安装qiankun框架 npm i qiankun -S

2、然后我们需要改造一下app.vue文件，我们要在app.vue中创建一个容器，负责把获取到的子应用加载到这里容器里面。

<template>
  <div id="app">
    <header>
      <router-link to="/about">主应用的page页面</router-link>
      <router-link to="/b-child">子应用B</router-link>
      <router-link to="/c-child">子应用C</router-link>
      <router-link to="/">回到主应用</router-link>
    </header>
    
    <router-view></router-view>
    <!-- id为appContainer就是放置子应用的容器 -->
     <div id="appContainer"></div>
  </div>
</template>

2、在src目录下创建qiankun.js文件，引用qiankun并且封装好

import {
   
  registerMicroApps,
  start
} from 'qiankun'

export const useQiankun = () => {
   
  const apps = [
    {
   
      name: 'b-child', // 必选，微应用的名称，微应用之间必须确保唯一
      entry: 'http://localhost:8022', // - 必选，微应用的入口
      container: '#appContainer', // -必选，微应用的容器节点的选择器或者 Element 实例
      activeRule: '/b-child', // - 必选，微应用的激活规则
      props: {
    // - 可选，主应用需要传递给微应用的数据。
        msg: '我是父应用传过来的值，传递给B应用'
      }
    },
    {
   
      name: 'c-child',
      entry: 'http://localhost:8033',
      container: '#appContainer',
      activeRule: '/c-child',
      props: {
   </