基于Vue3+TS+ElementPlus+Qiankun构建微应用项目( 二 ) _Vue3

然后，创建一个布局组件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文件的，这里我们手动创建一个，并且配置相关详细，代码如下：