vue3 ts element(vue3 elementplus)

大家好，我是安音。
近期计划将一个小项目(小程序点餐系统)重构为微服务微应用模式，前端技术栈计划使用Vue3 TS ElementPlus钱坤。下面记录一下我搭建一个基础的微应用的过程。
提前预告：这个小程序订餐系统计划代码整理后开源，改造后的项目也计划开源，敬请关注。
重建的项目相关地址：
后端：安音云[1]
前端：安银云母[2]
前端微应用：安银云基地[3]
好了，接下来，我们来看看如何基于Vue3 TS ElementPlus钱坤构建我们的微应用项目。
创建主应用程序(基础)。另外，为什么不用Vite在这里搭建呢？原因是目前结合钱坤把Vite构建成一个应用还存在一些问题(挖坑)，所以这里放弃了。
初始化项目首先，我们使用vue-cli创建一个父项目：
# vuecareateny-cloud-parent接下来，手动选择我们要添加的组件：
我们选择以下组件来构建应用程序，使用空格键进行多项选择，然后按enter键：
选择vue版本3.x。
相关的代码样式和路由方式都是默认的，css编译我们用的比较少：
我们使用ESLint Airbnb配置进行相关编码规范：
最后，完整的选项如下：
当vue-cli帮助我们创建项目时，我们进入项目以检查项目目录，如下所示：
要安装钱坤，首先钱坤的主应用需要安装依赖项，而微应用不需要安装依赖项，只需修改配置即可。这里，我们首先在主应用程序中安装依赖项。
# npm i钱坤-S接下来，配置相关的微应用。我们增加了一个app.ts，记录所有微应用的入口：
//src/modules/apps . tsconst apps : any[]=[{ name : ‘ anyin-center-base ‘，entry : ‘//localhost :4001 ‘，container: ‘#micro-app ‘，activeRule: ‘/base ‘，}，]；导出默认应用程序；然后，注册微应用，导出启动方法。
//src/modules/index . t从“钱坤”导入{ registerMicroApps，addGlobalUncaughtErrorHandler，start，}；//微应用从“@/modules/app”导入应用的信息；/* * *注册微应用*第一个参数-微应用的注册信息*第二个参数-全局生命周期钩子*/Registermicro-apps (apps，{//钱坤生命周期钩子-加载微应用之前，加载3360之前(app 3360 any)={//加载微应用之前，加载进度条console.log(‘)返回promise . resolve()；}，//钱坤生命周期钩子——微应用挂载后，挂载： (app3360any)后)={//加载微应用前，进度条加载console.log(‘挂载后’，app . name)；return promise . resolve()；},});/* * *添加一个全局未捕获的异常处理程序*/addglobaluncaughterrorhandler((event 3360 event | string)={ console . error(event))；});//导出钱坤的启动函数导出默认启动；start方法导出后，需要在入口处执行。
//src/main . t从“vue”导入{ create app }；从’导入应用程序。/app . vue ‘；从’导入路由器。/router ‘；从’导入存储。/store ‘；“导入开始于”。/modules ‘；const App=create App(App)start()；app.use(商店)。使用(路由器)。挂载(‘ # app ‘)；为整个界面安装ElementPlus，我们希望整体布局看起来像这样：
所以，在我们安装了ElementPlus之后，我们需要做这个布局。
首先，安装ElementPlus。
# npm i element-plus -S接下来，main.ts中引入了ElementPlus组件，如下所示：3360
//src/main . t从“vue”导入{ create app }；从’导入应用程序。/app . vue ‘；从’导入路由器。/router ‘；从’导入存储。/store ‘；//从’ element-plus ‘ Import ‘ element-plus/dist/index . CSS ‘ Import start from ‘导入ElementPlus组件和样式。/modules ‘；const App=create App(App)start()；App.use(商店)。use(router) //使用elementplus.use (elementplus)。挂载(‘ # app ‘)；然后，创建布局组件Layout.vue，如下所示：
安音云{{ item.name }}
最后，在App.vue中注册组件
运行的效果如下：
创建微应用微应用的初始化项目同主应用，这里就不详细说明。
微应用无需依赖钱坤，这里我们做一些配置即可。
配置公共路径.射流研究…在科学研究委员会目录下新增一个公共路径.射流研究…文件，内容如下：
//src/public-path.jsif(窗口. POWERED _ BY _钱坤_ _){//eslint-disable-next-line no-undef _ _ web pack _ public _ path _ _=window ._ _ INJECTED _ PUBLIC _ PATH _ BY钱坤_ _;}在主页面引入该文件
//src/main。t导入./public-path ‘；配置路由信息新增一个路由配置文件，这里我们创建对应的路由信息，并且兼容独立运行，内容如下：
//src/router/index。英语字母表中第二十个字母从” vue路由器”导入{ createRouter，createWebHistory，RouteRecordRaw }。’从以下位置导入主页’./views/home。vue ‘；从” @/views/route/Route.vue “导入路线；从” @/views/route/RouteInfo.vue “导入RouteInfo从” @/views/dict/Dict.vue “导入Dict从” @/views/config/Config.vue “导入配置；const routes : Array=[{ path : ‘/’，name: ‘Home ‘，component: Home，}，{ path: ‘/route ‘，name: ‘Route ‘，component : ‘/info/: id ‘，name: ‘RouteInfo ‘，component: RouteInfo，}，{ path: ‘/dict ‘，name const router=create router({//使用历史模式，并且兼容独立运行//当使用微应用运行的时候，使用`/base ‘为baseUrl，因为我们在主应用配置的activeRule是`/base ` history :创建web历史记录(窗口._ _ POWERED _ BY _钱坤__ ‘/base/’ : ‘/’)，路线，});导出默认路由器；接着，修改主页面关于实例化的代码，如下：
//src/main.ts//定义一个Vue实例让实例： Vue .App//需要定义该接口，否则`/src/router/index.ts ‘无法使用”窗户. POWERED _ BY _钱坤_ _ `声明全局{接口窗口{ _ _ POWERED _ BY _钱坤_ _ : string} }接口IRenderProps { container : Element | string；}//渲染方法函数render(props : IRenderProps){ const { container }=props；instance=create App(App)；实例。使用(存储)。使用(路由器)。使用(ElementPlus).挂载元素(容器)的容器实例。查询选择器(# app’)作为元素):(容器作为字符串))；}//独立运行时如果(!窗户. POWERED _ BY _钱坤_ _){ render({ container : ‘ # app ‘ })；}这里主要是定义个渲染的方法，然后暴露Vue实例，因为等下在微应用的生命周期的钩子会使用到。
暴露微应用的生命周期钩子对于微应用还需要暴露生命周期的钩子方法，这样子主应用才能够识别，在主页面添加如下方法：
//src/main.ts//暴露主应用生命周期钩子导出异步函数bootstrap(){ console。log(‘ subapp bootstrapped ‘)；}导出异步函数安装(道具：任何){控制台。log(‘ mount subapp ‘)；渲染(道具);}导出异步函数unmount() { console.log(‘卸载学院app’)；实例。unmount()；}修改打包配置使用vue创建项目是没有vue。配置.射流研究…文件的，这里我们手动创建一个，并且配置相关详细，代码如下：
const path=require(‘ path ‘)；const { name }=require(‘。/package’)；const port=4001//dev port function resolve(dir){ return path . join(_ _ dirname，dir)；} module . exports={ output dir : ‘ dist ‘，assetsDir: ‘static ‘，filenameHashing: true，dev server : { host : ‘ 0 . 0 . 0 . 0 ‘，hot: true，disableHostCheck: true，port，overlay : { warnings : false，errors: true，}，Headers : { ‘ Access-Control-Allow-Origin ‘我们在这里导入了package.json的name字段，因为需要和主应用配置的app.ts文件的name字段保持一致。headers添加了跨域配置，因为主应用通过fetch方法获取了微应用的资源，而微应用是在另一个端口启动的，所以需要添加跨域配置。输出配置了微应用的打包格式，以便主应用可以正确识别微应用的一些配置。
写布局。还记得我们下面这张图吗？
我觉得头部应该属于主应用，而下面的side和Main属于微应用。side块通常用于显示菜单。我个人认为每个微应用都应该维护自己的菜单，而不是留给主应用。
因此，在微应用中，我们还需要处理左侧的菜单布局。
我们添加一个Layout.vue布局文件。
//src/views/layout/layout . vue { { item . name } }这样一来，我们就完成了Vue3 TS ElementPlus钱坤搭建的微应用项目的一个基本架构。我们来看看整个操作后的效果：
主页
微应用
最后，我们已经搭建好了基于Vue3 TS ElementPlus钱坤的微应用项目基本框架，接下来就是慢慢填充一些工具和页面了。
相关源代码地址：
主要应用：安银云母
微应用：安银云基地
参考文献[1]安音云： https://gitee . com/Anyin/Anyin-Cloud[2]安音云parent : https://gitee . com/Anyin/Anyin-Cloud-parent[3]安音云base : https://gitee.com/anyin/anyin-cloud-base