基于Vue3TSElementPlusQiankun构建微应用项目

　　引言
　　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  ，如下：   
　　最后，在App.vue注册该组件   
　　运行起来呈现的效果如下：
　　创建微应用
　　微应用的初始化项目同主应用，这里就不详细说明。
　　微应用无需依赖 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 = [   {     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; // 需要定义该接口，否则`/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  结果
　　至此，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