最近手头有个后台管理系统的需求，Angular 技术栈。平时大家用 Ant Design 或者 Material 比较多，但我这次想尝尝鲜，试试华为云开源的 DevUI。听说它是专门针对企业级中后台产品的，主打一个“抗造”和“规范”，正好拿我的新项目练练手。

折腾了一下午，整体感觉还是挺顺滑的，不过中间也有几个小坑，这里记录一下我的踩坑和上手过程，希望能帮大家省点时间。

起步：环境搭建

老规矩，先搞定环境。我的 Node 版本是 18.x，Angular CLI 是 17。如果你还在用老版本，建议升级一下，不然依赖冲突能让人头大。

首先初始化一个 Angular 项目，这步大家应该都很熟了：

ng new my-devui-app
cd my-devui-app

• css我选scss
• 我不需要服务端渲染，选否（n）

接下来就是安装 DevUI 的核心包。官方文档写得很清楚，直接 npm 梭哈：

npm install ng-devui @devui-design/icons --save

顺手把图标库也装了，免得后面按钮缺图标显示方块。

这里有个坑：样式配置

安装完不是立马就能用的！我刚开始就是急吼吼地去写代码，结果运行起来组件丑得没法看——完全没有样式。

一定要记得去 angular.json 里配置样式文件。 很多新手（包括我）容易漏掉这一步。

你需要把 DevUI 的 CSS 路径加到 styles 数组里：

"styles": [
  "node_modules/ng-devui/devui.min.css",
  "src/styles.css"
]

初体验：按钮与表单

配置好后，我在 app.module.ts 里导入了几个常用的模块，比如 ButtonModule 和 FormModule。

1. 按钮 (Button)

先来个最简单的按钮试试水。DevUI 的按钮风格比较硬朗，很适合B端产品。

<d-button bsStyle="primary">提交审核</d-button>
<d-button bsStyle="common" icon="icon-refresh">重置</d-button>

用起来跟原生写法差不多，bsStyle 控制样式，加个 icon 属性就能带图标，挺方便。

2. 表单 (Form)

做后台系统，最头疼的就是表单布局。DevUI 的 d-form 还是挺香的，它把布局封装得比较好，不用自己写一大堆 CSS 去对齐 label 和 input。

这是我写的一个简单的登录框代码：

<form dForm [formGroup]="loginForm">
  <d-form-item>
    <d-form-label required>账号</d-form-label>
    <d-form-control>
      <input dTextInput formControlName="username" placeholder="请输入工号" />
    </d-form-control>
  </d-form-item>
  <!-- ...其他字段 -->
</form>

写完之后，页面看起来非常整洁，间距、对齐这些细节处理得很到位，不用自己微调 CSS 真的太爽了。

遇到的小问题

在开发过程中，我遇到过一次报错 Module not found。排查了半天，发现是因为 DevUI 是按需加载的，用了什么组件必须在 Module 里单独 import。虽然稍微繁琐点，但为了打包体积小，忍了。

另外，如果你发现样式死活不生效，记得重启一下 ng serve。有时候修改了 angular.json，热更新是不会自动抓取的。

总结

总的来说，DevUI 给我的感觉是“稳重”。它可能没有一些C端组件库那么花哨，但对于需要大量表单、表格、布局的后台系统来说，它的交互逻辑和视觉规范非常扎实。

如果你也是做企业级应用，或者厌倦了千篇一律的 Material Design，华为云这套 DevUI 确实值得一试。接下来我准备再深挖一下它的复杂表格（Datatable）功能，听说那是它的杀手锏，下次有空再来分享。

参考链接：

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home