一、引言

DevUI 是华为推出的面向企业级应用开发的前端组件库，基于 Angular 构建，遵循 Design System 设计规范，提供了一套高一致性、高性能、可扩展的 UI 组件。它不仅包含丰富的基础组件（如按钮、表格、表单等），还集成了高级交互组件（如树形控件、图表、数据可视化等），广泛应用于 DevOps 平台、云服务控制台、内部管理系统等场景。

本教程旨在帮助开发者从零开始快速上手 DevUI，涵盖 环境搭建 → 基础使用 → 实战案例 → 常见问题 → 创新扩展 的完整路径，并辅以代码示例、流程图、Prompt 提示词、图表等多维内容，适合前端初学者及有一定 Angular 经验的开发者。

目标读者：Angular 开发者、前端工程师、技术负责人、高校学生
前置知识：HTML/CSS/JavaScript、TypeScript 基础、了解 Angular CLI
字数：约 5800 字

---

二、环境搭建

2.1 安装 Node.js 与 npm

DevUI 依赖现代前端构建工具链，首先需安装 Node.js（≥18.x） 和 npm（≥9.x）：

bash

编辑

# 检查版本
node -v  # 应 ≥ v18.0.0
npm -v   # 应 ≥ 9.0.0

推荐使用 nvm 管理 Node 版本。

2.2 创建 Angular 项目

使用 Angular CLI 初始化项目：

bash

编辑

npm install -g @angular/cli
ng new my-devui-app
cd my-devui-app

选择 CSS 预处理器（建议 SCSS）、是否启用路由等。

2.3 安装 DevUI

DevUI 官方包名为 @devui-design/icons 和 ng-devui：

bash

编辑

npm install ng-devui @devui-design/icons

注意：ng-devui 是核心组件库，@devui-design/icons 提供图标资源。

2.4 引入 DevUI 模块

在 app.module.ts 中导入所需模块：

ts

编辑

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// DevUI 核心模块
import { DevUIModule } from 'ng-devui';
import { DevUIIconService } from 'ng-devui/icon';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DevUIModule.forRoot() // 全局注册 DevUI
  ],
  providers: [DevUIIconService],
  bootstrap: [AppComponent]
})
export class AppModule {}

2.5 引入样式文件

在 angular.json 的 styles 数组中添加 DevUI 样式：

json

编辑

{
  "projects": {
    "my-devui-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/ng-devui/style/devui.min.css",
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

✅ 至此，DevUI 环境已成功搭建！

---

三、基础功能使用

3.1 按钮（Button）

DevUI 提供多种按钮类型：主按钮、次按钮、危险按钮、链接按钮等。

html

预览

<!-- app.component.html -->
<d-button bsStyle="primary">Primary</d-button>
<d-button bsStyle="common">Common</d-button>
<d-button bsStyle="danger">Danger</d-button>
<d-button bsStyle="text">Text Link</d-button>

支持尺寸（size="sm" | "lg"）、禁用（disabled）、加载状态（loading）等属性。

3.2 表格（DataTable）

表格是企业级应用的核心组件。DevUI 的 d-data-table 支持分页、排序、筛选、行操作。

ts

编辑

// app.component.ts
export class AppComponent {
  columns = [
    { field: 'id', header: 'ID' },
    { field: 'name', header: '姓名' },
    { field: 'email', header: '邮箱' }
  ];

  data = [
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' }
  ];
}

html

预览

<!-- app.component.html -->
<d-data-table [dataSource]="data" [columns]="columns">
</d-data-table>

⚠️ 注意：dataSource 必须是数组，columns 定义列结构。

3.3 表单与验证（Form）

结合 Angular Reactive Forms 使用 DevUI 表单控件：

ts

编辑

// app.component.ts
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class AppComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      username: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

html

预览

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <d-form-item label="用户名">
    <input dInput formControlName="username" placeholder="请输入用户名">
    <d-form-error *ngIf="userForm.get('username')?.invalid && userForm.get('username')?.touched">
      用户名至少3位
    </d-form-error>
  </d-form-item>

  <d-form-item label="邮箱">
    <input dInput formControlName="email" type="email" placeholder="example@domain.com">
  </d-form-item>

  <d-button type="submit" bsStyle="primary">提交</d-button>
</form>

3.4 对话框（Modal）

使用 ModalService 动态打开模态框：

ts

编辑

// app.component.ts
import { ModalService } from 'ng-devui/modal';

export class AppComponent {
  constructor(private modalService: ModalService) {}

  openModal() {
    this.modalService.open({
      content: '这是一个 DevUI 对话框！',
      title: '提示',
      okBtnText: '确定',
      cancelBtnText: '取消'
    });
  }
}

html

预览

<d-button (click)="openModal()">打开对话框</d-button>

---

四、Mermaid 流程图：DevUI 开发流程

以下流程图展示了从环境搭建到组件使用的标准开发流程：

flowchart TD
    A[开始] --> B{是否已有 Angular 项目?}
    B -- 否 --> C[使用 ng new 创建项目]
    B -- 是 --> D[进入项目目录]
    C --> D
    D --> E[安装 ng-devui 和图标库]
    E --> F[在 AppModule 中导入 DevUIModule]
    F --> G[在 angular.json 中引入样式]
    G --> H[启动开发服务器: ng serve]
    H --> I[在组件中使用 DevUI 组件]
    I --> J[调试与优化]
    J --> K[构建生产版本: ng build]
    K --> L[部署上线]
 

---

五、实战案例：用户管理后台

我们将构建一个简易的用户管理页面，集成表格、搜索、新增、编辑、删除功能。

5.1 数据结构

ts

编辑

interface User {
  id: number;
  name: string;
  role: 'admin' | 'user';
  status: 'active' | 'inactive';
}

5.2 组件逻辑

ts

编辑

// user-management.component.ts
import { Component } from '@angular/core';
import { ModalService } from 'ng-devui/modal';

@Component({
  selector: 'app-user-management',
  templateUrl: './user-management.component.html'
})
export class UserManagementComponent {
  users: User[] = [
    { id: 1, name: '王五', role: 'admin', status: 'active' },
    { id: 2, name: '赵六', role: 'user', status: 'inactive' }
  ];

  searchKeyword = '';

  get filteredUsers() {
    return this.users.filter(u =>
      u.name.includes(this.searchKeyword)
    );
  }

  constructor(private modal: ModalService) {}

  addUser() {
    // 模拟打开新增表单
    this.modal.open({
      content: '此处应为表单组件',
      title: '新增用户'
    });
  }

  editUser(user: User) {
    this.modal.open({
      content: `编辑用户: ${user.name}`,
      title: '编辑'
    });
  }

  deleteUser(id: number) {
    this.modal.open({
      content: '确定删除该用户？',
      title: '确认删除',
      okBtnText: '删除',
      cancelBtnText: '取消',
      onOk: () => {
        this.users = this.users.filter(u => u.id !== id);
      }
    });
  }
}

5.3 模板代码

html

预览

<!-- user-management.component.html -->
<div class="user-header">
  <d-input [(ngModel)]="searchKeyword" placeholder="搜索用户名"></d-input>
  <d-button bsStyle="primary" (click)="addUser()">新增用户</d-button>
</div>

<d-data-table [dataSource]="filteredUsers" [columns]="[
  { field: 'name', header: '姓名' },
  { field: 'role', header: '角色' },
  { field: 'status', header: '状态' },
  { field: 'actions', header: '操作', render: actionRenderer }
]">
</d-data-table>

注：render 属性支持自定义列渲染函数，可传入模板引用或函数。

---

六、新手常见问题解答（FAQ）

Q1：为什么 DevUI 样式未生效？

• ✅ 检查 angular.json 是否正确引入 devui.min.css
• ✅ 确保 BrowserAnimationsModule 已导入
• ✅ 清除缓存后重启 ng serve

Q2：如何自定义主题色？

DevUI 支持 SCSS 变量覆盖。在 styles.scss 中：

scss

编辑

@import '~ng-devui/style/theme/devui-var.scss';

$devui-brand: #626fd9; // 自定义主色
@import '~ng-devui/style/devui.min.scss';

注意：需将 angular.json 中的 devui.min.css 替换为上述 SCSS 文件。

Q3：表格分页如何实现？

使用 d-pagination 组件配合 d-data-table：

html

预览

<d-data-table [dataSource]="pagedData" ...></d-data-table>
<d-pagination 
  [total]="totalItems" 
  [pageSize]="pageSize" 
  (pageChange)="onPageChange($event)">
</d-pagination>

在 TS 中处理分页逻辑：

ts

编辑

onPageChange(page: number) {
  const start = (page - 1) * this.pageSize;
  this.pagedData = this.allData.slice(start, start + this.pageSize);
}

Q4：图标不显示？

确保已注册图标服务并引入图标：

ts

编辑

// app.module.ts
import { DevUIIconService } from 'ng-devui/icon';
import { AddIcon, DeleteIcon } from '@devui-design/icons';

@NgModule({
  providers: [
    {
      provide: DevUIIconService,
      useFactory: (iconService: DevUIIconService) => {
        iconService.addIcon(...AddIcon, ...DeleteIcon);
        return iconService;
      },
      deps: [DevUIIconService]
    }
  ]
})

然后在模板中使用：

html

预览

<d-icon name="add"></d-icon>

Q5：如何提升性能？

• 避免在模板中使用复杂计算（如 *ngFor 内嵌函数）
• 对大型表格启用虚拟滚动（DevUI 支持 virtualScroll）
• 按需导入模块（避免 DevUIModule.forRoot() 全量引入）

---

七、Prompt 示例：AI 辅助开发

在使用 Copilot 或通义千问等 AI 工具时，可使用以下 Prompt 快速生成 DevUI 代码：

Prompt 1：生成带搜索的表格

“使用 Angular 和 DevUI 组件库，创建一个用户列表页面，包含搜索框和表格，表格有姓名、邮箱、操作列（编辑、删除按钮）。使用 Reactive Forms 和 ModalService。”

Prompt 2：自定义主题

“如何在 Angular 项目中使用 SCSS 覆盖 DevUI 的默认主题色为蓝色 (#1890ff)？请给出 styles.scss 和 angular.json 配置。”

Prompt 3：错误处理

“DevUI 表单验证失败时，如何动态显示错误信息？请结合 d-form-item 和 d-form-error 组件写一个登录表单示例。”

---

八、图表与数据可视化

DevUI 集成 ECharts，提供 d-chart 组件：

ts

编辑

// chart.component.ts
chartOption = {
  title: { text: '用户增长趋势' },
  xAxis: { type: 'category', data: ['Jan', 'Feb', 'Mar'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150], type: 'line' }]
};

html

预览

<d-chart [options]="chartOption" style="width: 600px; height: 400px;"></d-chart>

需额外安装 echarts：npm install echarts

---

九、创新与扩展

9.1 封装业务组件

将常用模式封装为业务组件，例如 user-selector：

ts

编辑

@Component({
  selector: 'app-user-selector',
  template: `
    <d-select [options]="users" optionLabel="name" [(ngModel)]="selectedUser"></d-select>
  `
})
export class UserSelectorComponent {
  users = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
  selectedUser: any;
}

9.2 与微前端集成

DevUI 可无缝集成到 qiankun 微前端架构中，只需确保子应用独立打包并正确隔离样式。

9.3 国际化（i18n）

DevUI 支持多语言，通过 DevConfigService 设置：

ts

编辑

constructor(private devConfig: DevConfigService) {
  this.devConfig.set({ lang: 'en-us' });
}

---

十、总结

DevUI 作为企业级 Angular 组件库，具备以下优势：

• 🧩 开箱即用：丰富组件覆盖 90% 业务场景
• 🎨 设计统一：遵循华为 Design System，体验一致
• ⚙️ 高度可定制：支持主题、国际化、按需加载
• 📊 生态完善：图表、表格、表单、布局一应俱全

通过本教程，你已掌握：

• 环境搭建全流程
• 核心组件使用方法
• 实战项目开发技巧
• 常见问题排查思路
• AI 辅助开发 Prompt