DevUI微前端集成实战解析

系统目录

目录

一、微前端集成：多技术栈应用的统一体验

[1.1 基于 qiankun 的微前端集成方案](#1.1 基于 qiankun 的微前端集成方案)

[1.1.1 主应用（Angular）配置：统一管理主题与权限](#1.1.1 主应用（Angular）配置：统一管理主题与权限)

[1.1.2 子应用（Vue）适配：接入 DevUI 并响应主应用配置](#1.1.2 子应用（Vue）适配：接入 DevUI 并响应主应用配置)

[1.1.3 关键保障：](#1.1.3 关键保障：)

[1.2 微前端集成优势对比](#1.2 微前端集成优势对比)

[二、低代码平台集成：DevUI 组件的可视化编排](#二、低代码平台集成：DevUI 组件的可视化编排)

[2.1 核心原理：组件元数据标准化](#2.1 核心原理：组件元数据标准化)

[示例：DevUI Button 组件的配置 Schema](#示例：DevUI Button 组件的配置 Schema)

[2.2 低代码平台集成实战（基于 Angular）](#2.2 低代码平台集成实战（基于 Angular）)

[2.2.1 步骤 1：解析组件 Schema 生成配置界面](#2.2.1 步骤 1：解析组件 Schema 生成配置界面)

[2.2.2 步骤 2：拖拽生成组件并渲染](#2.2.2 步骤 2：拖拽生成组件并渲染)

[2.3 集成价值：](#2.3 集成价值：)

三、跨端框架集成：一次开发，多端部署

[3.1 Electron+DevUI：桌面端应用开发](#3.1 Electron+DevUI：桌面端应用开发)

[3.1.1 项目初始化](#3.1.1 项目初始化)

[3.1.2 配置 Electron](#3.1.2 配置 Electron)

[3.1.3 DevUI 组件适配桌面端](#3.1.3 DevUI 组件适配桌面端)

[3.1.4 打包桌面端应用](#3.1.4 打包桌面端应用)

[3.2 移动端适配：DevUI+Ionic](#3.2 移动端适配：DevUI+Ionic)

四、生态集成总结

---

DevUI 作为企业级前端解决方案，不仅提供独立的组件库与设计系统，更支持与「微前端、低代码平台、跨端框架」等主流技术栈无缝集成，解决企业级系统「技术栈多元化、开发模式差异化、部署场景复杂」的核心痛点。本文将详细拆解 DevUI （官网：https://devui.design/home）在不同集成场景下的落地方案与实战代码。华为云DevUI

一、微前端集成：多技术栈应用的统一体验

企业级系统常存在「Angular/Vue/React 技术栈并存」的情况，DevUI 通过「微前端框架适配 + 主题统一 + 权限共享」，实现多应用的无缝集成。

1.1 基于 qiankun 的微前端集成方案

1.1.1 主应用（Angular）配置：统一管理主题与权限

// 主应用：src/app/micro-frontend/micro-frontend.service.ts
import { Injectable } from '@angular/core';
import { registerMicroApps, start, setDefaultMountApp } from 'qiankun';
import { DevUIThemeService } from 'ng-devui/core';

@Injectable({ providedIn: 'root' })
export class MicroFrontendService {
  constructor(private themeService: DevUIThemeService) {}

  // 初始化微前端应用
  initMicroApps() {
    // 1. 注册子应用（支持Angular/Vue/React）
    registerMicroApps([
      {
        name: 'vue-app', // Vue子应用（使用DevUI Vue版本）
        entry: '//localhost:8081',
        container: '#micro-app-container',
        activeRule: '/vue-app',
        props: {
          theme: this.themeService.getCurrentTheme(), // 传递主应用主题
          token: localStorage.getItem('token') // 传递登录态
        }
      },
      {
        name: 'react-app', // React子应用（使用DevUI React版本）
        entry: '//localhost:8082',
        container: '#micro-app-container',
        activeRule: '/react-app',
        props: {
          theme: this.themeService.getCurrentTheme(),
          token: localStorage.getItem('token')
        }
      }
    ]);

    // 2. 设置默认子应用
    setDefaultMountApp('/vue-app');

    // 3. 启动qiankun
    start({
      sandbox: { strictStyleIsolation: true } // 样式隔离，避免冲突
    });
  }

  // 主题同步：主应用主题变更时，通知子应用
  syncThemeToMicroApps(theme: any) {
    // 遍历所有微应用，触发主题更新
    (window as any).microApps.forEach(app => {
      app.instance?.setTheme(theme);
    });
  }
}

<!-- 主应用：src/app/app.component.html -->
<d-layout>
  <!-- 顶部导航（主应用统一提供） -->
  <d-header>
    <div class="logo">DevUI微前端平台</div>
    <d-nav [items]="navItems" mode="horizontal" (itemClick)="navigate($event)"></d-nav>
    <button d-button (click)="switchTheme()">切换暗色模式</button>
  </d-header>

  <!-- 微应用容器 -->
  <d-layout-content>
    <div id="micro-app-container" class="micro-app-container"></div>
  </d-layout-content>
</d-layout>

1.1.2 子应用（Vue）适配：接入 DevUI 并响应主应用配置

// Vue子应用：src/main.js
import Vue from 'vue';
import App from './App.vue';
import { DevUIPlugin } from 'vue-devui'; // DevUI Vue版本
import './theme.scss'; // 引入DevUI主题

let app = null;

// 微应用生命周期钩子
export async function bootstrap() {
  console.log('Vue子应用启动');
}

export async function mount(props) {
  // 接收主应用传递的主题、权限信息
  const { theme, token } = props;
  
  // 初始化Vue应用，注入DevUI
  app = new Vue({
    render: h => h(App, {
      props: {
        theme,
        token
      }
    })
  }).$mount('#app');

  // 暴露主题更新方法给主应用
  app.setTheme = (newTheme) => {
    app.$children[0].theme = newTheme;
    // 切换DevUI主题
    if (newTheme.darkMode) {
      document.documentElement.setAttribute('devui-theme', 'dark');
    } else {
      document.documentElement.removeAttribute('devui-theme');
    }
  };
}

export async function unmount() {
  app.$destroy();
  app = null;
}

// 独立运行时初始化
if (!window.__POWERED_BY_QIANKUN__) {
  new Vue({
    render: h => h(App)
  }).$mount('#app');
}

1.1.3 关键保障：

• 主题统一：主应用控制全局主题，子应用自动响应（支持暗色模式、品牌色切换）；
• 样式隔离：qiankun 的严格样式隔离 + DevUI 的命名空间（devui-前缀），避免样式冲突；
• 权限共享：主应用统一管理登录态，子应用无需重复登录；
• 技术栈无关：Angular/Vue/React 子应用均可使用对应版本的 DevUI，保持交互一致性。

1.2 微前端集成优势对比

集成方案	优势	适用场景
qiankun+DevUI	技术栈无关、主题统一、样式隔离	多技术栈并存的大型企业平台
single-spa+DevUI	轻量、灵活，适合简单微前端架构	中小型应用集成
DevUI 微前端模块	原生支持，无需额外框架，集成成本低	同技术栈（如全 Angular）应用

二、低代码平台集成：DevUI 组件的可视化编排

DevUI 组件支持「可视化配置 + 拖拽式开发」，可无缝集成到低代码平台，实现「零代码 / 低代码」构建企业级应用。

2.1 核心原理：组件元数据标准化

DevUI 每个组件均提供 JSON 格式的「配置 Schema」，低代码平台可通过解析 Schema 生成可视化配置界面，用户配置后自动生成代码。

示例：DevUI Button 组件的配置 Schema

{
  "componentName": "d-button",
  "label": "按钮",
  "category": "基础组件",
  "props": [
    {
      "name": "type",
      "label": "按钮类型",
      "type": "enum",
      "default": "button",
      "options": [
        { label: "普通按钮", value: "button" },
        { label: "提交按钮", value: "submit" },
        { label: "重置按钮", value: "reset" }
      ]
    },
    {
      "name": "theme",
      "label": "主题风格",
      "type": "enum",
      "default": "default",
      "options": [
        { label: "默认", value: "default" },
        { label: "primary", value: "primary" },
        { label: "danger", value: "danger" },
        { label: "warning", value: "warning" }
      ]
    },
    {
      "name": "size",
      "label": "尺寸",
      "type": "enum",
      "default": "medium",
      "options": [
        { label: "小型", value: "small" },
        { label: "中型", value: "medium" },
        { label: "大型", value: "large" }
      ]
    },
    {
      "name": "disabled",
      "label": "是否禁用",
      "type": "boolean",
      "default": false
    },
    {
      "name": "content",
      "label": "按钮文本",
      "type": "string",
      "default": "按钮"
    }
  ],
  "events": [
    {
      "name": "click",
      "label": "点击事件",
      "description": "按钮点击时触发"
    }
  ],
  "slots": []
}

2.2 低代码平台集成实战（基于 Angular）

2.2.1 步骤 1：解析组件 Schema 生成配置界面

// 低代码平台：src/app/editor/component-config/component-config.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-component-config',
  template: `
    <div class="component-config">
      <h3>{{ componentSchema.label }} 配置</h3>
      <!-- 遍历props生成配置项 -->
      <div *ngFor="let prop of componentSchema.props" class="config-item">
        <label>{{ prop.label }}</label>
        <ng-container [ngSwitch]="prop.type">
          <!-- 枚举类型：下拉选择 -->
          <d-select 
            *ngSwitchCase="'enum'"
            [(ngModel)]="config[prop.name]"
            [options]="prop.options"
            (ngModelChange)="onConfigChange()"
          ></d-select>
          <!-- 布尔类型：复选框 -->
          <d-checkbox 
            *ngSwitchCase="'boolean'"
            [(ngModel)]="config[prop.name]"
            (ngModelChange)="onConfigChange()"
          ></d-checkbox>
          <!-- 字符串类型：输入框 -->
          <d-input 
            *ngSwitchDefault
            [(ngModel)]="config[prop.name]"
            (ngModelChange)="onConfigChange()"
          ></d-input>
        </ng-container>
      </div>
    </div>
  `
})
export class ComponentConfigComponent {
  @Input() componentSchema: any; // 组件配置Schema
  @Input() config: any = {}; // 当前组件配置
  @Output() configChange = new EventEmitter<any>();

  ngOnChanges() {
    // 初始化配置（使用默认值）
    this.config = {
      ...this.componentSchema.props.reduce((obj, prop) => {
        obj[prop.name] = prop.default;
        return obj;
      }, {}),
      ...this.config
    };
  }

  onConfigChange() {
    this.configChange.emit(this.config);
  }
}

2.2.2 步骤 2：拖拽生成组件并渲染

// 低代码平台：src/app/editor/editor.component.ts
import { Component } from '@angular/core';
import { ComponentSchemaService } from './component-schema.service'; // 组件Schema服务

@Component({
  selector: 'app-editor',
  template: `
    <div class="editor-container">
      <!-- 左侧组件面板 -->
      <div class="component-panel">
        <div 
          *ngFor="let component of components"
          class="component-item"
          (dragstart)="onDragStart(component)"
          draggable="true"
        >
          {{ component.label }}
        </div>
      </div>

      <!-- 中间画布 -->
      <div class="canvas" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
        <div *ngFor="let item of canvasComponents" class="canvas-component">
          <!-- 动态渲染DevUI组件 -->
          <ng-container *ngComponentOutlet="
            item.component;
            inputs: item.config
          "></ng-container>
        </div>
      </div>

      <!-- 右侧配置面板 -->
      <div class="config-panel" *ngIf="selectedComponent">
        <app-component-config 
          [componentSchema]="selectedComponent.schema"
          [config]="selectedComponent.config"
          (configChange)="updateComponentConfig(selectedComponent, $event)"
        ></app-component-config>
      </div>
    </div>
  `
})
export class EditorComponent {
  components: any[] = []; // 所有可用的DevUI组件
  canvasComponents: any[] = []; // 画布上的组件
  selectedComponent: any = null; // 当前选中的组件

  constructor(private componentSchemaService: ComponentSchemaService) {
    // 加载DevUI组件Schema
    this.components = this.componentSchemaService.getComponentSchemas();
  }

  // 拖拽开始：记录拖拽的组件
  onDragStart(component: any) {
    event.dataTransfer.setData('component', JSON.stringify(component));
  }

  // 拖拽结束：添加组件到画布
  onDrop(event: DragEvent) {
    event.preventDefault();
    const component = JSON.parse(event.dataTransfer.getData('component'));
    // 动态导入DevUI组件（按需加载）
    import(`ng-devui/${component.componentName}`).then(module => {
      const canvasComponent = {
        component: module[component.componentName],
        schema: component,
        config: {}
      };
      this.canvasComponents.push(canvasComponent);
      this.selectedComponent = canvasComponent;
    });
  }

  onDragOver(event: DragEvent) {
    event.preventDefault();
  }

  // 更新组件配置
  updateComponentConfig(component: any, config: any) {
    component.config = config;
  }
}

2.3 集成价值：

• 开发效率提升 80%：拖拽式操作替代手动编码，快速生成表单、表格、布局等页面；
• 一致性保障：所有组件均来自 DevUI，天然保持设计与交互一致性；
• 灵活扩展：支持自定义组件 Schema，集成企业专属组件。

三、跨端框架集成：一次开发，多端部署

DevUI 支持与「Electron（桌面端）、Ionic（移动端）」等跨端框架集成，实现「PC 端 + 桌面端 + 移动端」的统一开发与部署。

3.1 Electron+DevUI：桌面端应用开发

3.1.1 项目初始化

# 1. 创建Angular项目
ng new devui-electron-app

# 2. 安装DevUI
npm i ng-devui --save

# 3. 安装Electron依赖
npm i electron electron-builder --save-dev
npm i ngx-electron --save

3.1.2 配置 Electron

// 根目录：main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let win;

function createWindow() {
  // 创建窗口
  win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  // 加载Angular应用
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'dist/devui-electron-app/index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

  // 打开开发者工具
  win.webContents.openDevTools();

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

3.1.3 DevUI 组件适配桌面端

// src/app/app.component.ts
import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-root',
  template: `
    <d-layout>
      <d-header>DevUI桌面端应用</d-header>
      <d-layout-content>
        <!-- DevUI表格组件（桌面端适配） -->
        <d-table [data]="tableData" [columns]="tableColumns"></d-table>
        
        <!-- 桌面端专属功能：调用系统对话框 -->
        <button d-button (click)="openDialog()">打开文件</button>
      </d-layout-content>
    </d-layout>
  `
})
export class AppComponent {
  tableData = [
    { name: '文件1', size: '100KB', type: '文档' },
    { name: '文件2', size: '200KB', type: '图片' }
  ];

  tableColumns = [
    { label: '文件名', key: 'name' },
    { label: '大小', key: 'size' },
    { label: '类型', key: 'type' }
  ];

  constructor(private electronService: ElectronService) {}

  // 调用Electron API打开文件对话框
  openDialog() {
    if (this.electronService.isElectronApp) {
      this.electronService.remote.dialog.showOpenDialog({
        properties: ['openFile']
      }).then(result => {
        console.log('选中的文件：', result.filePaths);
      });
    }
  }
}

3.1.4 打包桌面端应用

// package.json
{
  "scripts": {
    "electron:build": "ng build --prod && electron-builder"
  },
  "build": {
    "appId": "com.devui.electron.app",
    "win": {
      "target": "nsis",
      "icon": "src/assets/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "src/assets/icon.icns"
    }
  }
}

# 打包Windows应用
npm run electron:build -- --win

# 打包Mac应用
npm run electron:build -- --mac

3.2 移动端适配：DevUI+Ionic

DevUI 组件支持响应式布局，结合 Ionic 框架可快速实现移动端适配：

<!-- src/app/mobile/mobile.component.html -->
<ion-page>
  <ion-header>
    <ion-toolbar>
      <ion-title>DevUI移动端应用</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <!-- DevUI表单组件（移动端适配） -->
    <d-form [formData]="formData" [dFormGroup]="formGroup">
      <d-form-item label="用户名" name="username" required>
        <d-input [(ngModel)]="formData.username" placeholder="请输入用户名"></d-input>
      </d-form-item>
      <d-form-item label="密码" name="password" required>
        <d-input type="password" [(ngModel)]="formData.password" placeholder="请输入密码"></d-input>
      </d-form-item>
      <d-form-operation>
        <button d-button type="submit" theme="primary" class="full-width">登录</button>
      </d-form-operation>
    </d-form>
  </ion-content>
</ion-page>

// 移动端样式适配
.full-width {
  width: 100%;
  margin-top: 16px;
}

::ng-deep .devui-form-item {
  margin-bottom: 16px;
}

::ng-deep .devui-input {
  --devui-input-height: 44px; // 适配移动端触摸区域
}

四、生态集成总结

DevUI 的生态集成能力核心在于「标准化 + 适配性」：

1. 微前端集成：支持多技术栈协同，实现主题、权限、样式的统一管理；
2. 低代码集成：通过组件 Schema 标准化，支持可视化拖拽开发，提升效率；
3. 跨端集成：与 Electron、Ionic 等框架适配，实现一次开发多端部署。