助力企业级应用开发不再头疼：DevUI组件库的实战秘籍 - 登陆页面样式布局完成

qq_46340842

759人浏览 · 2025-12-11 10:00:31

qq_46340842 · 2025-12-11 10:00:31 发布

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: 8px 24px;
}

在这里插入图片描述

引入一个img图片进来：

<p>
  <d-layout class="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-layout class="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-button
              class="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>