引言
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.tsconst apps: any[] = [ { name: 'anyin-center-base', entry: '//localhost:4001', container: '#micro-app', activeRule: '/base', },];export default apps;然后，注册微应用，并导出start方法
// src/modules/index.tsimport { 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.tsimport { 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.tsimport { 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.jsif (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line no-undef __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}在main.ts引入该文件
// src/main.tsimport "./public-path";配置路由信息
新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：
// src/router/index.tsimport { 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 portfunction 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
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除