从0到1集成华为云 DevUI前端框架保姆级教程

国服第二切图仔2025-12-11 10:41

前言

DevUI是面向企业中后台产品的开源前端解决方案，其设计价值观基于"高效、开放、可信、乐趣"四种自然与人文相结合的理念，旨在为设计师、前端开发者提供标准的设计体系，并满足各类落地场景，是一款企业级开箱即用的产品。 DevUI组件库源自于华为内部大量业务的多年沉淀，支持灵活配置的组件才能满足不同诉求。DevUI企业级前端解决方案

项目集成

1、先确认本地node版本为20以上

2、DevUI框架基于Angular，全局安装Angular脚手架：

javascript 复制代码

npm install -g @angular/cli@18

3、验证安装是否成功：

javascript 复制代码

ng version

4、使用脚手架创建初始化项目

javascript 复制代码

ng new devuidemo 
选择less 作为css的构建策略，可以写嵌套的css

5、提示是否时候服务端渲染，我这里不需要，输入no

6、提示 Packages installed successfully的代表安装成功了

7、项目中集成DevUI框架

使用如下命令下载框架，等待下载完成即可

javascript 复制代码

npm i ng-devui

8 、下载完成后，在项目工程中先引入样式

在 angular.json 文件中引入DevUI样式：

javascript 复制代码

{
  "styles": [
    ...
    "node_modules/ng-devui/devui.min.css"
  ]
}

9、这里以面板组件为例，文档中提供了详细的使用示例

在app.component.ts中引入组件，如下图所示

代码示例：

javascript 复制代码

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PanelModule } from 'ng-devui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,PanelModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.less'
})
export class AppComponent {
  title = 'devuidemo';
}

10、在html代码中集成组件代码

11.、启动开发调试

npm run start

12、查看效果，到这一步咱们的项目就成功集成华为云 DevUI框架了

参考资料

MateChat：https://gitcode.com/DevCloudFE/MateChat

MateChat官网：https://matechat.gitcode.com

DevUI官网：https://devui.design/home