DevUI 是一款面向企业中后台产品的开源前端解决方案，源自华为内部多年的业务沉淀，致力于通过组件库和设计体系提升开发效率与体验一致性。
核心定位与技术基础：基于 Angular 框架构建，提供开箱即用的 UI 组件库，强调“高效、开放、可信、乐趣”的设计价值观，适用于复杂的企业级应用开发。
关键特性：
- 组件库丰富性：涵盖表格（DTable）、表单、弹窗等高频组件，支持虚拟滚动、行展开、列拖拽等高级功能，优化大数据量场景下的性能。
- 自定义与扩展能力：允许开发者基于 DevUI 规范创建自定义组件，集成外部库（如 D3.js），并通过依赖注入确保可维护性。
- 主题定制化：通过 CSS 变量和 SCSS mixin 实现品牌主题与暗黑模式动态切换，支持多品牌系统响应式布局。
应用场景与实践：在云控制台、风控系统等大型项目中，通过模块化加载、组件复用（复用率达 85%）及性能监控工具，将页面加载时间优化至 800ms 以内。
生态整合与创新：与 AI 工具（如 MateChat）结合实现智能交互，并探索低代码化方向，通过可视化拖拽生成代码骨架。
DevUI 通过完整的开发工具链（如环境搭建指南和教程）降低上手门槛，适合需要快速构建高一致性企业应用的团队。
如何使用？
在官网中可以看到需要使用Angular版本来安装项目，而且必须版本是18.0.0，额，本人也不会Angular呀
所以，在官网也是找了一下，可以看到官网温馨的给出了一个在线的Angular页面，可以让我们来使用，非常的友好。
使用方式参照下方的 StackBlitz 演示，推荐Fork本例来进行Bug Report，注意不要在实际工程中这样使用。
ng-devui-12
动手实验表单创建登陆页面：
Layout 布局，页面的布局方式，包含响应式栅格、Flex、间距、响应式Class、响应式Style、典型布局容器等。
可以看到页面样式没没有生效？
在app.component.css中添加一些样式：
.layout-wrapper{margin-top:36px;}d-header{text-align:center;line-height:40px;}d-aside{min-height:200px;min-width:120px;text-align:center;display:flex;justify-content:center;align-items:center;}d-content{line-height:200px;text-align:center;}d-footer{padding:8px24px;}引入一个img图片进来：
<p><d-layoutclass="layout-wrapper"><d-layout><d-aside><img style="width: 50vw;margin-left: 3vw;"src="https://devui.design/assets/img/newHome/boanner-decorate.png"/></d-aside><d-content>右边登陆框</d-content></d-layout><d-footer>copyright</d-footer></d-layout></p>添加完表单相关的元素：
<p><d-layoutclass="layout-wrapper"><d-layout><d-aside><img style="width: 50vw;margin-left: 3vw;"src="https://devui.design/assets/img/newHome/boanner-decorate.png"/></d-aside><d-content style="padding-right: 4vw;"><form dForm ngForm><d-form-item><d-form-label[required]="true">用户名</d-form-label><d-form-control><div><input dTextInput autocomplete="off"name="userName"/></div></d-form-control></d-form-item><d-form-item><d-form-label[required]="true">密码</d-form-label><d-form-control><div><input dTextInput autocomplete="off"name="password"/></div></d-form-control></d-form-item><d-form-operation><d-buttonclass="mr-element-spacing"[title]="userForm.errorMessage || ''"circled="true"style="margin-right: 8px"dFormSubmit>登录</d-button></d-form-operation></form></d-content></d-layout><d-footer>copyright</d-footer></d-layout></p>DevUI 开源前端框架助力企业级应用开发，基于 Angular 提供丰富组件库和设计体系。本文通过实战演示如何使用其在线工具 StackBlitz 快速构建登录页面：
- 采用 Layout 布局组件实现响应式页面结构
- 结合表单组件(dForm/dFormItem)创建用户名/密码输入框
- 集成图片展示和按钮交互功能
- 通过 CSS 样式调整优化视觉呈现
无需本地环境配置即可体验 DevUI 的高效开发特性，适合企业后台系统快速原型搭建。该案例展示了组件复用和布局管理能力，体现框架在提升开发效率方面的优势。
参考链接：
MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home