微前端开发进阶

微前端应用中使用基座提供的组件和Api

base 中暴露出模块给微应用共享

./build/mfp.config.js

module.exports = {
  name: 'base',  // appCode
  filename: 'remoteEntry.js',
  exposes: {
   './controller': './src/actions/controller',
    './lib': './src/libs/index.js',
    './utils': './src/utils',
    './api': './src/api/expose.js',
    './components': './src/components/index.js',
    // ElementUI和 PrimetonUI等全局注册的组件无需暴露，子应用可以直接使用
  },
}

微前端使用base中的组件

<template>
    <div >
  <AuthManage />
    </div>
</template>
<script>
import {AuthManage} from 'base/components'
export default {
    components:{AuthManage},
   }
...

微前端使用base中的api

import {BaseVue, List} from 'base/lib'
import { ProjectController} from 'base/controller'
 methods:{
        async searchBody() {
            const q = this.otherQuery(this.query)
            let payload = {...q,tenantId:this.currentTenant}
            const resp = await                           		this.dispatch(ProjectController.queryProjectsByCriteria,payload)
            return resp
        },
        async removeBody(row) {
            let payload = [row.id]
            const resp = await this.dispatch(ProjectController.deleteByIds, payload)
            return resp
        },
      }

微前端应用中使用其它微应用提供的组件和Api

微应用之间如何互相调用组件

利用base提供的中转组件，需要传其他微应用的appCode和moduleCode

<template>
  <RemoteComponent :appCode="appCode" :moduleCode="moduleCode"/>
</template>
<script>
import { RemoteComponent } from 'base/components'
export default {
  components:{RemoteComponent}
}
</script>

微前端应用中进行路由

定义路由

<template>
  <div class="Breadcrumber">
    <PmNavigation ref="nav"  :routes="routes" :allow-click="true" :cacheInclude="[]"/>
  </div>
</template>
<script>
import AppList from "./list.vue"
import AppDetail from "./detail.vue"
export default {
  components: { AppList, AppDetail},
  data() {
    return {
      routes: [
        {
          title: "应用管理",
          component: AppList,
          children: [
            {
              title: "应用详情",
              name: "detail",
              component: AppDetail,
            },
          ],
        },
      ],
    }
  },
  mounted() {},
  methods: {},
}
</script>

调转路由

<el-table-column  sortable="code" label="应用编号" prop="code">
         <template slot-scope="{row}">
              <el-link @click="gotoDetail(row)">{{row.code}}</el-link>
         </template>
</el-table-column>

  gotoDetail(row){
            this.goto({
                title:`应用编辑（${row.name}）`,
                name:`detail`,//定义路由的name
                props:{
                    data:row,
                }
            })
        },

微前端应用中使用图标库

1.在 https://www.iconfont.cn/ 网站上制作好字体文件, 将其copy 到微应用的 static 目录下

└── static
    └── font_3201028_ggmgh148pbh
        ├── iconfont.css
        ├── iconfont.js
        ├── iconfont.json
        ├── iconfont.ttf
        ├── iconfont.woff
        └── iconfont.woff2

2.在store/index.js 文件中编写加载字体文件的代码

import {HtmlUtil} from 'base/lib'
HtmlUtil.dynamicLoadCss('./demo/static/font_3201028_ggmgh148pbh/iconfont.css')

3.在微应用中就可以调用图标样式了

<span class="iconfont icon-wode"></span>