江苏龙网

  1. 主页 > 生活百科 > >

基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

Vue3

引言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+TS+ElementPlus+Qiankun构建微应用项目】 
我们选择以下组件进行应用的构建，使用空格键进行多选，然后回车即可：
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
选择vue3.x版本
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
相关代码风格、路由模式都是使用默认，css编译我们使用less：
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
相关编码规范我们使用ESLint + Airbnb Config ：
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
最后，完整的选项如下：
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
当vue-cli帮我们创建好项目，我们进入项目查看下项目目录，如下：
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
安装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对于整个界面，我们希望整体的布局是这个样子的：
基于Vue3+TS+ElementPlus+Qiankun构建微应用项目

文章插图
 
所以，我们在安装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");


推荐阅读


上一篇：JavaScript面向对象—继承的实现

下一篇：手把手教你分析解决MySQL死锁问题