引言
Hello 大家好，這里是Anyin。
最近打算把一個小型項目（小程序點餐系統(tǒng)）重構(gòu)為微服務(wù)+微應(yīng)用模式，前端的技術(shù)棧打算使用Vue3 + TS + ElementPlus + Qiankun 。這里記錄下我在構(gòu)建基礎(chǔ)微應(yīng)用的過程。
提前預(yù)告下：這個小程序點餐系統(tǒng)代碼整理后計劃開源，并且重構(gòu)后的項目也計劃開源，敬請期待。
重構(gòu)后的項目相關(guān)地址：
•后端： Anyin Cloud [1]
•前端基座：Anyin Cloud Parent[2]
•前端微應(yīng)用：Anyin Cloud Base[3]
好了，接下來，我們來看看如何基于Vue3+TS+ElementPlus+Qiankun 構(gòu)建我們的微應(yīng)用項目。
創(chuàng)建主應(yīng)用（基座）
另外說下，這里為什么不用Vite進行構(gòu)建，原因是Vite目前結(jié)合Qiankun構(gòu)建為應(yīng)用還有點問題（采坑了），所以這里就放棄了。
初始化項目
首先，我們使用vue-cli創(chuàng)建一個parent項目:
# vue create anyin-cloud-parent
接著，手動選擇我們要添加的組件：
我們選擇以下組件進行應(yīng)用的構(gòu)建，使用空格鍵進行多選，然后回車即可：
選擇vue3.x版本
相關(guān)代碼風(fēng)格、路由模式都是使用默認，css編譯我們使用less：
相關(guān)編碼規(guī)范我們使用ESLint + Airbnb Config ：
最后，完整的選項如下：
當vue-cli幫我們創(chuàng)建好項目，我們進入項目查看下項目目錄，如下：
安裝Qiankun
首先，Qiankun的主應(yīng)用是需要安裝依賴的，微應(yīng)用無需安裝依賴，修改配置即可。這里我們先在主應(yīng)用安裝依賴
# npm i qiankun -S
接著，進行相關(guān)微應(yīng)用配置。我們新增一個App.ts，用于記錄所有的微應(yīng)用的入口：
// src/modules/apps.ts
const apps: any[] = [
{
name: 'anyin-center-base',
entry: '//localhost:4001',
container: '#micro-app',
activeRule: '/base',
},
];
export default apps;
然后，注冊微應(yīng)用，并導(dǎo)出start方法
// src/modules/index.ts
import {
registerMicroApps,
addGlobalUncaughtErrorHandler,
start,
} from 'qiankun';
// 微應(yīng)用的信息
import apps from "@/modules/app";
/**
* 注冊微應(yīng)用
* 第一個參數(shù) - 微應(yīng)用的注冊信息
* 第二個參數(shù) - 全局生命周期鉤子
*/
registerMicroApps(apps, {
// qiankun 生命周期鉤子 - 微應(yīng)用加載前
beforeLoad: (app: any) => {
// 加載微應(yīng)用前，加載進度條
console.log('before load', app.name);
return Promise.resolve();
},
// qiankun 生命周期鉤子 - 微應(yīng)用掛載后
afterMount: (app: any) => {
// 加載微應(yīng)用前，進度條加載完成
console.log('after mount', app.name);
return Promise.resolve();
},
});
/**
* 添加全局的未捕獲異常處理器
*/
addGlobalUncaughtErrorHandler((event: Event | string) => {
console.error(event);
});
// 導(dǎo)出 qiankun 的啟動函數(shù)
export default start;
導(dǎo)出start方法之后，需要在入口處執(zhí)行該方法
// 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");
然后，創(chuàng)建一個布局組件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">
<!-- 應(yīng)用系統(tǒng)掛載的節(jié)點 -->
<div id="micro-app"></div>
<router-view />
</el-main>
</el-container>
</el-container>
</template>
<script lang="ts" setup>
// 各個應(yīng)用系統(tǒng)
const system = [
{ name: "首頁", path: "/" },
{ name: "系統(tǒng)管理", 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>
運行起來呈現(xiàn)的效果如下：
創(chuàng)建微應(yīng)用
微應(yīng)用的初始化項目同主應(yīng)用，這里就不詳細說明。
微應(yīng)用無需依賴Qiankun，這里我們做一些配置即可。
配置public-path.js
在src目錄下新增一個public-path.js文件，內(nèi)容如下：
// 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";
配置路由信息
新增一個路由配置文件，這里我們創(chuàng)建對應(yīng)的路由信息，并且兼容獨立運行，內(nèi)容如下：
// 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模式，并且兼容獨立運行
// 當使用微應(yīng)用運行的時候，使用`/base`為baseUrl，因為我們在主應(yīng)用配置的activeRule是`/base`
history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? "/base/" : "/"),
routes,
});
export default router;
接著，修改main.ts關(guān)于實例化的代碼，如下：
// 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實例，因為等下在微應(yīng)用的生命周期的鉤子會使用到。
暴露微應(yīng)用的生命周期鉤子
對于微應(yīng)用還需要暴露生命周期的鉤子方法，這樣子主應(yīng)用才能夠識別，在main.ts添加如下方法：
// src/main.ts
//暴露主應(yīng)用生命周期鉤子
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創(chuàng)建項目是沒有vue.config.js文件的，這里我們手動創(chuàng)建一個，并且配置相關(guān)詳細，代碼如下：
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: {
// 把子應(yīng)用打包成 umd 庫格式
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
}
},
};
•這里我們導(dǎo)入了package.json的name字段，因為這里需要和主應(yīng)用配置的app.ts文件的name字段一致•headers 添加跨域配置，因為主應(yīng)用是通過fetch方法來獲取微應(yīng)用的資源的，而微應(yīng)用是啟動在另外一個端口，所以需要添加跨域配置•output 配置了微應(yīng)用的打包格式，主應(yīng)用才能正確識別微應(yīng)用的一些配置
編寫布局
還記得我們以下這個圖不？
我認為Header應(yīng)該是屬于主應(yīng)用，而下面的Aside和Main都是屬于微應(yīng)用，Aside塊一般都是用于展示菜單，個人認為各個微應(yīng)用應(yīng)該各自維護自己的菜單，而不是交由主應(yīng)用維護。
所以，在微應(yīng)用，我們還需要處理下左側(cè)的菜單布局。
我們新增一個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>
// 這里的菜單應(yīng)該從后端獲取
const menus = [
{ name: "路由配置", path: "/route" },
{ name: "字典配置", path: "/dict" },
{ name: "參數(shù)配置", path: "/config" },
];
const activeIndex = "";
const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath);
};
</script>
結(jié)果
至此，Vue3+TS+ElementPlus+Qiankun構(gòu)建微應(yīng)用項目的一個基本結(jié)構(gòu)我們已經(jīng)處理完成，整體運行看下效果：
首頁
微應(yīng)用
最后
好了，基于Vue3+TS+ElementPlus+Qiankun的微應(yīng)用項目基本框架我們已經(jīng)搭建好了，后續(xù)就是慢慢填充一些工具和頁面了。
相關(guān)源碼地址：
•主應(yīng)用：Anyin Cloud Parent
•微應(yīng)用：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
