基于vue 3+TS+element plus+钱坤构建微应用项目

大家好，我是安音。

最近计划将一个小项目(小程序点餐系统)重构为微服务+微应用模式，前端技术栈计划使用vue 3+TS+element plus+钱坤。以下是我搭建基础微应用的过程记录。

重建项目的相关地址:

？后端:安银云[1]

？前方基地:安音云母[2]

？前端微应用:安银云基地[3]

好了，接下来，我们来看看如何基于vue 3+TS+element plus+钱坤构建我们的微应用项目。

对了，这里为什么不用Vite来搭建呢？原因是Vite和钱坤结合构建应用还存在一些问题(挖坑)，所以我在这里放弃了。

首先，我们使用vue-cli创建一个父项目:

接下来，手动选择我们要添加的组件:

我们选择以下组件来构建应用程序，使用空格键进行多项选择，然后按enter键:

选择版本vue3.x

相关的代码样式和路由模式都是基于默认的，css编译用的比较少:

我们使用ESLint+Airbnb配置进行相关编码规范:

最后，完整的选项如下:

当vue-cli帮助我们创建一个好的项目时，我们进入项目以检查项目目录，如下所示:

首先，钱坤的主应用需要安装依赖项，微应用不需要安装依赖项，但是可以修改配置。这里，我们首先在主应用程序中安装依赖项。

然后，进行相关的微应用配置。我们加一个app.ts，记录所有微应用的入口:

然后，注册微应用，导出启动方法。

start方法导出后，需要在入口处执行。

对于整个界面，我们希望整体布局看起来像这样:

所以我们需要在安装完ElementPlus之后再做这个布局。

首先，安装ElementPlus。

然后，在main.ts中引入ElementPlus组件，如下所示:

然后，创建一个布局组件Layout.vue，如下所示:

最后，在App.vue中注册组件。

运行的效果如下:

微应用的初始化项目和主应用一样，这里不做详细说明。

微型应用不需要依赖钱坤。这里我们可以做一些配置。

在src目录下添加一个public-path.js文件，内容如下:

介绍main.ts中的文件

添加一个路由配置文件，我们在其中创建相应的路由信息，兼容独立操作。内容如下:

然后，修改main.ts关于实例化的代码，如下所示:

这里主要是定义一个渲染方法，然后暴露Vue的实例，因为微应用的生命周期中会用到钩子。

对于微应用来说，还需要暴露生命周期的钩子方法，让主应用能够识别。将以下方法添加到main.ts中:

用vue创建项目时没有vue.config.js文件。这里我们手动创建一个并详细配置它。代码如下:

？这里我们导入package.json的name字段，因为需要和主应用配置的app.ts文件的name字段一致？Headers添加跨域配置，因为主应用通过fetch方式获取微应用的资源，而微应用在另一个端口启动，所以需要添加跨域配置？Output配置微应用的封装格式，让主应用可以正确识别微应用的一些配置。

还记得我们下面这张图吗？

我觉得表头应该属于主应用，下面的旁注和主属于微应用。side块通常用于显示菜单。我个人认为，每个微应用都应该维护自己的菜单，而不是留给主应用。

因此，在微应用中，我们还需要处理左侧的菜单布局。

我们添加一个Layout.vue布局文件。

至此，我们已经完成了一个由vue 3+TS+element plus+钱坤构建的微应用项目的基本架构。我们来看看整体操作后的效果:

主页

微应用

好了，我们已经搭建好了基于vue 3+TS+element plus+钱坤的微应用项目基本框架，接下来会慢慢填充一些工具和页面。