从0到1落地微前端架构， MicroApp实战招聘网站「ZUI新」

从0到1落地微前端架构， MicroApp实战招聘网站

核心代码，注释必读

// download：3w ukoou com

为什么要学习微前端

1. 灵活的架构：微前端允许将前端应用拆分成多个独立的微服务，每个微服务可以独立开发、部署和运行。这种灵活的架构使团队能够更加高效地开发和维护复杂的前端应用。

2. 技术栈无关：微前端架构使得不同的微前端应用可以使用不同的技术栈，比如React、Vue、Angular等，而它们仍然可以被整合到一个统一的前端应用中。这样可以充分利用现有技术栈和团队的专长，提高开发效率。

3. 提升用户体验：微前端架构可以加快页面加载速度，减少首屏渲染时间，提升用户体验。由于每个微前端应用只加载所需的资源，因此在用户交互时可以更快地呈现内容。

4. 独立部署与维护：采用微前端架构后，各个微前端应用可以独立进行部署和维护，不会对其他应用产生影响。这意味着更快的发布周期和更好的系统可维护性。

5. 扩展性与复用性：微前端架构促进了组件级别的复用，并且支持跨应用的组件共享。这意味着开发团队可以更高效地构建和维护大型前端应用。

从0到1落地微前端架构， MicroApp实战招聘网站 实战

步骤一：创建主应用

1. 初始化一个Vite项目作为主应用：

npm init @vitejs/app main-app --template vue
cd main-app
npm install

2. 启动主应用开发服务器：

npm run dev

步骤二：创建子应用

1. 初始化一个Vite项目作为子应用：

npm init @vitejs/app sub-app1 --template vue
cd sub-app1
npm install

2. 在子应用的vite.config.js中配置为子应用模式：

export default {
  server: {
    port: 3001,
    proxy: {
      '/api': 'http://localhost:3000'
    }
  },
  build: {
    outDir: 'dist/sub-app1',
    assetsDir: '.',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
      },
    },
  },
}

3. 编写子应用的业务逻辑和组件。

步骤三：集成子应用到主应用

1. 在主应用中安装qiankun微前端框架：

npm install qiankun

2. 在主应用的入口文件中，注册子应用并启动微前端框架：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'sub-app1',
    entry: '//localhost:3001',
    container: '#subapp-viewport',
    activeRule: '/sub-app1',
  },
]);

start();

<template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.item {
  margin-top: 2rem;
  display: flex;
  position: relative;
}

.details {
  flex: 1;
  margin-left: 1rem;
}

i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;

  color: var(--color-text);
}

h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
}

@media (min-width: 1024px) {
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }

  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }

  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:first-of-type:before {
    display: none;
  }

  .item:last-of-type:after {
    display: none;
  }
}
</style>