引言

Hello 大家好，这里是Anyin。

最近打算把一个小型项目（小程序点餐系统）重构为微服务+微应用模式，前端的技术栈打算使用Vue3 + TS + ElementPlus + Qiankun 。这里记录下我在构建基础微应用的过程。

提前预告下：这个小程序点餐系统代码整理后计划开源，并且重构后的项目也计划开源，敬请期待。

重构后的项目相关地址：

?后端： Anyin Cloud [1]

?前端基座：Anyin Cloud Parent[2]

?前端微应用：Anyin Cloud Base[3]

好了，接下来，我们来看看如何基于Vue3+TS+ElementPlus+Qiankun 构建我们的微应用项目。

创建主应用（基座）

另外说下，这里为什么不用Vite进行构建，原因是Vite目前结合Qiankun构建为应用还有点问题（采坑了），所以这里就放弃了。

初始化项目

首先，我们使用vue-cli创建一个parent项目:

# vue create anyin-cloud-parent

接着，手动选择我们要添加的组件：

我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：

选择vue3.x版本

相关代码风格、路由模式都是使用默认，css编译我们使用less：

相关编码规范我们使用ESLint + Airbnb Config ：

最后，完整的选项如下：

当vue-cli帮我们创建好项目，我们进入项目查看下项目目录，如下：

安装Qiankun

首先，Qiankun的主应用是需要安装依赖的，微应用无需安装依赖，修改配置即可。这里我们先在主应用安装依赖

# npm i qiankun -S

接着，进行相关微应用配置。我们新增一个app.ts，用于记录所有的微应用的入口：

// src/modules/apps.ts
const apps: any[] = [
  {
    name: 'anyin-center-base',
    entry: '//localhost:4001',
    container: '#micro-app',
    activeRule: '/base',
  },
];


export default apps;

然后，注册微应用，并导出start方法

// src/modules/index.ts
import {
  registerMicroApps,
  addGlobalUncaughtErrorHandler,
  start,
} from 'qiankun';


// 微应用的信息
import apps from "@/modules/app";


/**
 * 注册微应用
 * 第一个参数 - 微应用的注册信息
 * 第二个参数 - 全局生命周期钩子
 */
registerMicroApps(apps, {
  // qiankun 生命周期钩子 - 微应用加载前
  beforeLoad: (app: any) => {
    // 加载微应用前，加载进度条
    console.log('before load', app.name);
    return Promise.resolve();
  },
  // qiankun 生命周期钩子 - 微应用挂载后
  afterMount: (app: any) => {
    // 加载微应用前，进度条加载完成
    console.log('after mount', app.name);
    return Promise.resolve();
  },
});


/**
 * 添加全局的未捕获异常处理器
 */
addGlobalUncaughtErrorHandler((event: Event | string) => {
  console.error(event);
});


// 导出 qiankun 的启动函数
export default start;

导出start方法之后，需要在入口处执行该方法

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from './router';
import store from './store';
import start from './modules';




const app = createApp(App)
start();


app.use(store).use(router).mount('#app');

安装ElementPlus

对于整个界面，我们希望整体的布局是这个样子的：

所以，我们在安装ElementPlus之后，需要做这样子的布局。

首先，安装ElementPlus

# npm i element-plus -S

接着，在main.ts引入ElementPlus组件，如下:

// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 引入ElementPlus组件和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import start from './modules';


const app = createApp(App)


start();


app.use(store)
  .use(router)
  // 使用ElementPlus
  .use(ElementPlus)
  .mount("#app");

然后，创建一个布局组件Layout.vue，如下：

<!-- src/views/layout/Layout.vue -->
<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="3">
          <h2>Anyin Cloud</h2>
        </el-col>
        <el-col :span="21">
          <el-menu :router="true" mode="horizontal" @select="handleSelect" :default-active="activeIndex">
            <el-menu-item :key="item.path" v-for="item in system" :index="item.path">
              {{ item.name }}
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-main class="main-container">
        <!-- 应用系统挂载的节点 -->
        <div id="micro-app"></div>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script lang="ts" setup>
// 各个应用系统
const system = [
  { name: "首页", path: "/" },
  { name: "系统管理", path: "/base" },
  { name: "用户管理", path: "/customer" },
  { name: "点餐管理", path: "/meal" },
]
const activeIndex = "";
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style lang="less">
.main-container {
  padding: 0 !important;
}
</style>

最后，在App.vue注册该组件

<template>
  <Layout/>
</template>
<script lang="ts" setup>
import Layout from "@/views/layout/Layout.vue";
</script>
<style lang="less">
body {
  margin: 0;
  padding: 0;
}
</style>

运行起来呈现的效果如下：

创建微应用

微应用的初始化项目同主应用，这里就不详细说明。

微应用无需依赖Qiankun，这里我们做一些配置即可。

配置public-path.js

在src目录下新增一个public-path.js文件，内容如下：

// src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

在main.ts引入该文件

// src/main.ts
import "./public-path";

配置路由信息

新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：

// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import Route from "@/views/route/Route.vue";
import RouteInfo from "@/views/route/RouteInfo.vue";
import Dict from "@/views/dict/Dict.vue";
import Config from "@/views/config/Config.vue";


const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/route",
    name: "Route",
    component: Route,
  },
  {
    path: "/route/info/:id",
    name: "RouteInfo",
    component: RouteInfo,
  },
  {
    path: "/dict",
    name: "Dict",
    component: Dict,
  },
  {
    path: "/config",
    name: "Config",
    component: Config,
  },
];


const router = createRouter({
  // 使用history模式，并且兼容独立运行
  // 当使用微应用运行的时候，使用`/base`为baseUrl，因为我们在主应用配置的activeRule是`/base`
  history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/base/" : "/"),
  routes,
});


export default router;

接着，修改main.ts关于实例化的代码，如下：

// src/main.ts
// 定义一个Vue实例
let instance: Vue.App<Element>;
// 需要定义该接口，否则`/src/router/index.ts`无法使用`Window.__POWERED_BY_QIANKUN__`
declare global {
  interface Window {
    __POWERED_BY_QIANKUN__?: string;
  }
}


interface IRenderProps {
  container: Element | string;
}


// 渲染方法
function render(props: IRenderProps) {
  const { container } = props;
  instance = createApp(App);
  instance
    .use(store)
    .use(router)
    .use(ElementPlus)
    .mount(
      container instanceof Element
        ? (container.querySelector("#app") as Element)
        : (container as string)
    );
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render({ container: "#app" });
}

这里主要是定义个渲染的方法，然后暴露Vue实例，因为等下在微应用的生命周期的钩子会使用到。

暴露微应用的生命周期钩子

对于微应用还需要暴露生命周期的钩子方法，这样子主应用才能够识别，在main.ts添加如下方法：

// src/main.ts
//暴露主应用生命周期钩子
export async function bootstrap() {
  console.log("subapp bootstraped");
}


export async function mount(props: any) {
  console.log("mount subapp");
  render(props);
}


export async function unmount() {
  console.log("unmount college app");
  instance.unmount();
}

修改打包配置

使用vue创建项目是没有vue.config.js文件的，这里我们手动创建一个，并且配置相关详细，代码如下：

const path = require('path');
const { name } = require('./package');


const port = 4001; // dev port


function resolve(dir) {
  return path.join(__dirname, dir);
}


module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  devServer: {
    host: '0.0.0.0',
    hot: true,
    disableHostCheck: true,
    port,
    overlay: {
      warnings: false,
      errors: true,
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*',
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Methods': '*',
      'Cache-Control': 'no-cache'
    },
  },
  // 自定义webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    output: {
      // 把子应用打包成 umd 库格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    }
  },
};

?这里我们导入了package.json的name字段，因为这里需要和主应用配置的app.ts文件的name字段一致?headers 添加跨域配置，因为主应用是通过fetch方法来获取微应用的资源的，而微应用是启动在另外一个端口，所以需要添加跨域配置?output 配置了微应用的打包格式，主应用才能正确识别微应用的一些配置

编写布局

还记得我们以下这个图不？

我认为Header应该是属于主应用，而下面的Aside和Main都是属于微应用，Aside块一般都是用于展示菜单，个人认为各个微应用应该各自维护自己的菜单，而不是交由主应用维护。

所以，在微应用，我们还需要处理下左侧的菜单布局。

我们新增一个Layout.vue布局文件

// src/views/layout/Layout.vue
<template>
  <el-container>
    <el-aside width="180px">
      <el-menu
        :router="true"
        @select="handleSelect"
        :default-active="activeIndex"
      >
        <el-menu-item :key="item.path" v-for="item in menus" :index="item.path">
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
// 这里的菜单应该从后端获取
const menus = [
  { name: "路由配置", path: "/route" },
  { name: "字典配置", path: "/dict" },
  { name: "参数配置", path: "/config" },
];
const activeIndex = "";
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

结果

至此，Vue3+TS+ElementPlus+Qiankun构建微应用项目的一个基本结构我们已经处理完成，整体运行看下效果：

首页

微应用

最后

好了，基于Vue3+TS+ElementPlus+Qiankun的微应用项目基本框架我们已经搭建好了，后续就是慢慢填充一些工具和页面了。

相关源码地址：

?主应用：Anyin Cloud Parent

?微应用：Anyin Cloud Base

References

[1] Anyin Cloud : https://gitee.com/anyin/anyin-cloud
[2] Anyin Cloud Parent: https://gitee.com/anyin/anyin-cloud-parent
[3] Anyin Cloud Base: https://gitee.com/anyin/anyin-cloud-base