# micro-project

**Repository Path**: lizhitong/micro-project

## Basic Information

- **Project Name**: micro-project
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-16
- **Last Updated**: 2025-02-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# micro-project

#### 介绍
https://gitee.com/lizhitong/micro-project

基座配置
1. 安装qiankun
`npm install qiankun`

2. 安装tmvc-base
`npm install tmvc-base`

3.在layout/components/AppMain.vue中挂载子应用
`<section id='micro-app' /> 子应用容器`

4. 复制microRouter文件夹到基座src目录下
修改config.json文件中地址为子应用方位地址
配置微应用

```
 /**
   * name: 微应用名称 - 具有唯一性，为了方便区分，采取和子应用名称
   * entry: 微应用入口 - 通过该地址加载微应用
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
   */
  {
    name: 'micro-experiment',
    entry: VUE_SON_APP,
    container: '#microExperiment',
    activeRule: '#/micro-experiment'
  }

```

5. 新建js文件 设置子应用菜单

```
import Layout from '@/layout'
const appRouter = {
  path: '/micro-experiment',
  component: Layout,
  redirect: 'doc1',
  name: 'micro-experiment',
  meta: {
    title: '微·子系统',
    icon: 'table'
  },
  children: [
    {
      path: '/micro-experiment/tab',
      children: [
        {
          path: 'tab',
          name: 'Tab',
          meta: { title: '子应用-测试页面1', icon: 'menuSon' }
        }
      ]
    },
    {
      path: '/micro-experiment/documentation',
      children: [
        {
          path: 'documentation',
          name: 'Documentation',
          meta: { title: '子应用-测试页面1', icon: 'menuSon' }
        }
      ]
    }
  ]
}
export default appRouter
```


6.在router/index.js中导入子应用菜单
`import experimentMenu from './modules/apps-menu'`

7.注入qiankun基座配置
`import startQiankun from 'tmvc-base'`


8.在router/index.js调用qiankun启动服务
`startQiankun()`

9.封装qiankun通讯方法
shared/actions.js文件

10.修改基座App.vue文件中的id 为main-app

11.修改styles中的index.scss 和 sidebar.scss 文件中的 #app 为 #main-app

修改子应用项目：
`npm install tmvc`

1.src/layout/index.vue

```
 data() {
    return {
      isMicroApp: window.__POWERED_BY_QIANKUN__// 配置微前端菜单显示与否
    };
  },

 <div v-if="!isMicroApp" :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </div>
  </div>
  <app-main v-else />
```


2.新增microApp文件夹

3.修改router/index.js

```
{
    path: '/micro-experiment/documentation', // micro-experiment为基座配置的activeRule: 
    component: Layout,
    children: [
      {
        path: 'documentation',
        component: () => import('@/views/documentation/index'),
        name: 'Documentation',
        meta: { title: 'Documentation', icon: 'documentation', affix: true }
      }
    ]
  },
```


4.main.js改造


```
// 微前端配置文件注入
 
import tmvc from 'tmvc'
 
// name 导出微应用生命周期
 
const { bootstrap, mount, unmount } = tmvc.microMain()
 
export { bootstrap, mount, unmount }


```

5.在vue-config.js配置底部复制以下代码，供微应用使用
// 微前端子项目配置注入
 

```
const { microConfig, headers } = require('./src/microApp/micro-config.js')
 
module.exports.devServer.headers = headers// 配置跨域 必须
 
module.exports.configureWebpack.output = microConfig// umd格式注入 必须
//module.exports.publicPath = `//localhost:${port}`// 端口号配置 不是必须设置

```

基座向子应用发送数据


```
import actions from '@/shared/actions';// 注入qiankun通讯组件
mounted() {
    // 注册一个观察者函数
    actions.onGlobalStateChange((state, prevState) => {
      // state: 变更后的状态; prevState: 变更前的状态
      console.log('主应用观察者：token 改变前的值为 ', prevState.token);
      console.log('主应用观察者：登录状态发生改变，改变后的 token 的值为 ', state.token);
    });
  },

 methods: {  // 向 子应用-测试页面2 发送数据
    sendToChildren() {
      this.token = this.$store.state.user.token;
      window.localStorage.setItem('token', this.token);
      const token = this.token;
      console.log(this.$store.state,'99999');
      actions.setGlobalState({ token });
    },
  }


```