介绍

盘古3.0项目内可进行高代码页面开发，对于大型项目而言，所有的代码堆砌在一个项目内不利于项目的开发和维护，为支持项目组进行业务代码拆分，我们提供了基于vue3的高代码微应用脚手架，将不同的业务代码拆分到不同的微应用中，便于项目的开发和维护。

脚手架地址

http://gitlab.hisense.com/Pangea/Pangea-Cloud/frontend/pangea-vue3-project/pangea-web-vue3-micro.git

脚手架介绍

国际化

页面的国际化数据在src/locale/lang文件夹内本地自行维护

路由

定义的页面路由需与该页面的微应用菜单路由保持一致

公共请求

@/utils/request 文件的request方法。默认调用主工程request方法

全局数据

内置useMainStore存储高代码页面中用户的全局store数据，包括：

• locale 当前语言环境
• timeZone 时区
• user 用户信息
• appNowCategory 应用类别数据

开发步骤

• 1、下载vue3微应用脚手架
• 2、公共开发平台-应用开发-微应用集成页面 新增一条微应用数据，若为本地开发模式微应用地址设置为本地地址，例：http://localhost:3001
• 3、新增微应用菜单，选择已新增的微应用，定义好菜单路由
• 4、本地启动主工程代码及微应用工程代码进行项目开发
• 5、微应用工程中新建页面组件并定义页面路由，注意：路由地址与定义的微应用菜单路由地址一致

微应用页面缓存

为实现微应用页面基于页签缓存，需要设置页面组件的名称为当前页面所对应的微应用菜单的菜单编码menuCode, 示例如下：

<template>
  <div>
    <a-input
      :style="{ width: '320px' }"
      placeholder="Please enter something"
      allow-clear
    />
  </div>
</template>
<script lang="ts" setup></script>
<script>
export default {
  name: "pangea466a6dbc517c4b79ba397ff56ec0d86d", // 定义页面组件名称为该页面对应的菜单的menuCode值，用于实现页面缓存
};
</script>
<style lang="less" scoped></style>