# qiankun

**Repository Path**: ifercarly/qiankun

## Basic Information

- **Project Name**: qiankun
- **Description**: qiankun~~~~~~~~~
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-01
- **Last Updated**: 2023-08-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[qiankun](https://qiankun.umijs.org/zh/)

[你可能并不需要微前端](https://www.yuque.com/kuitos/gky7yw/fy3qri)

[文章](https://zhuanlan.zhihu.com/p/551206945)

## 建项目

```bash
vue create v2
```

```bash
npm create vite@latest
```

## 主应用

1\. 安装乾坤。

```bash
npm i qiankun
```

2\. 新增配置文件。

`src/resisterMicroApp.js`

```js
import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'hmzs-big-screen', // 子应用名称
    entry: '//localhost:5173', // 子应用运行的服务地址
    container: '#container', // 子应用挂载的容器
    activeRule: '/big-screen' // 访问哪个路由时加载子应用
  }
])

start()
```

3\. 入口文件加载配置。

`main.js`

```js
// 启动微前端配置
import './registerMicroApp'
```

4\. 配置子应用加载的位置。

`src/App.vue`

```html
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div id="container"></div>
  </div>
</template>
```

## 子应用

1\. 配置 `vite-plugin-qiankun` 插件。

```bash
npm i vite-plugin-qiankun -D
```

`vite.config.js`

```ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 这里的名称要和主应用改造时配置项中的 name 保持一致
    qiankun('hmzs-big-screen', {
      useDevMode: true
    })
  ],
  server: {
    // 防止开发阶段的 assets 静态资源加载问题
    origin: '//localhost:5173'
  }
})
```

2\. 入口文件改造。

`main.ts`

```ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

import './styles/common.scss'

renderWithQiankun({
  mount (props) {
    console.log('mount')
    render(props)
  },
  bootstrap () {
    console.log('bootstrap')
  },
  unmount (props) {
    console.log('unmount', props)
  },
})

// 当前应用程序是否在 qiankun 容器中运行，如果不在，就挂载到当前项目的 #app 中
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({})
}

function render (props = {}) {
  const { container } = props
  const app = createApp(App)
  app.use(router)
  app.mount(container ? container.querySelector("#app") : "#app")
}
```

## 3D

![image-20230730170645882](README.assets/image-20230730170645882.png)

<img src="README.assets/1686043683303-f13e7aee-1217-4d72-9e14-e64de96b390e.png" alt="image.png" style="zoom: 33%;" />

`App.vue`

```html
<script setup>
// 导入模型解析构造函数
import { Application } from '@splinetool/runtime'
import { onMounted, ref } from 'vue'
// #1
import LoadingComponent from './components/LoadingComponent.vue'

// #2
const showLoading = ref(false)
// 初始化3d模型
const ref3d = ref(null)
const publicPath = 'https://fe-hmzs.itheima.net'
const init3dModel = () => {
  // #3
  showLoading.value = true
  // 实例化解析器实例
  let spline = new Application(ref3d.value)
  // 拉取模型
  spline.load(`${publicPath}/scene.splinecode`).then(() => {
    // #4
    showLoading.value = false
    console.log('3D模型加载并渲染完毕')
  })
}
// dom节点渲染完毕再加载
onMounted(() => {
  init3dModel()
})

</script>

<template>
  <div class="model-container">
    <!-- #5 -->
    <LoadingComponent :loading="showLoading" />
    <!-- 准备3D渲染节点 -->
    <canvas class="canvas-3d" ref="ref3d" />
  </div>
</template>

<style scoped lang="scss">
.model-container {
  height: 100%;
  background-color: black;
  width: 100%;
  flex-shrink: 0;
}
</style>
```

`components/LoadingComponent.vue`

```html
<script setup>
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div v-if="loading" class="loading">
    <p class="text">园区资源加载中…</p>
    <div class="loading-process">
      <div class="process-wrapper"></div>
    </div>
  </div>
</template>

<style lang="scss">
.loading {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  text-align: center;

  .text {
    font-size: 14px;
    color: #909399;
    margin-bottom: 16px;
  }

  .loading-process {
    width: 280px;
    height: 4px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    overflow: hidden;
  }

  .process-wrapper {
    height: 100%;
    width: 5%;
    background: linear-gradient(90deg, #48ffff 0%, #3656ff 100%);
    animation-duration: 1000s;
    animation-name: loading;
  }

  @keyframes loading {
    0% {
      transform: scaleX(1);
    }

    1% {
      transform: scaleX(38);
    }

    100% {
      transform: scaleX(40);
    }
  }
}
</style>
```

`components/LoadingComponent.vue`

```html
<script setup>
defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div v-if="loading" class="loading">
    <p class="text">园区资源加载中…</p>
    <div class="loading-process">
      <div class="process-wrapper"></div>
    </div>
  </div>
</template>

<style lang="scss">
.loading {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  text-align: center;

  .text {
    font-size: 14px;
    color: #909399;
    margin-bottom: 16px;
  }

  .loading-process {
    width: 280px;
    height: 4px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    overflow: hidden;
  }

  .process-wrapper {
    height: 100%;
    width: 5%;
    background: linear-gradient(90deg, #48ffff 0%, #3656ff 100%);
    animation-duration: 1000s;
    animation-name: loading;
  }

  @keyframes loading {
    0% {
      transform: scaleX(1);
    }

    1% {
      transform: scaleX(38);
    }

    100% {
      transform: scaleX(40);
    }
  }
}
</style>
```

`style.css`

```css
*{
  margin: 0;
  padding: 0;
}
html,body,#app{
  height: 100%;
}
```