引言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+TS+ElementPlus+Qiankun构建微应用项目】
我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：
文章插图
选择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");
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 基于密集行为的欺诈检测算法-LockInfer
- 基于Kali的一次DDos攻击实践
- Linux内核中断之中断初始化
- 一个基于Vue3的无编译小框架 byview
- 网络协议之：基于UDP的高速数据传输协议UDT
- 纯前端生成设置头像 - 基于Vue3、Ts、Vite
- 几种常用的基于密度的聚类算法
- 一个基于spring boot的Java开源商城系统
- WebRTC 音视频同步原理与实现
- SpringBoot实战基于异常日志的邮件报警
