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

在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: 'localhost:8022', // - 必选，微应用的入口container: '#appContainer', // -必选，微应用的容器节点的选择器或者 Element 实例activeRule: '/b-child', // - 必选，微应用的激活规则props: { // - 可选，主应用需要传递给微应用的数据。msg: '我是父应用传过来的值，传递给B应用'}},{name: 'c-child',entry: 'localhost:8033',container: '#appContainer',activeRule: '/c-child',props: {</