引言

作为前端工程是，在开发web端应用时。UI组件可以大大缩短开发时间，提高效率。这次开发项目时使用华为云 DevUI作为UI组件库作为开发依赖， 本文就记录华为云 DevUI的项目配置和搭建。

DevUI优势：

• DevUI 为 Web 应用提供了丰富的基础 UI 组件。
• 特别在企业级应用中要大量使用tree, table等通用组件DevUI有很好的支持；
• 持续维护，版本更新及时

项目搭建

准备

1. 环境支持

• node版本最好是20+以上
• npm包下载工具
  
  当前我用的node是v22.21.1版本，npm的是10.9.4版本

2. DevUI基于Angular架构；

首先需要安装Angular，官网当前支持的Angular版本 ^18.0.0。先全局安装angular

验证安装：

ng version

显示上图就代表安装成功了。

3. 创建和初始化项目

• 使用下面命令，可以创建Angular项目的:

ng new New-Project

我这里之前已经创建了文件夹，使用：

ng new dev-ui-gn --skip-git --directory=.

以当前文件夹初始化Angular项目

这里选择一种css构建的策略。我这里选择sass构建css.

这里提示是是否时候服务端渲染，我这里不需要，选n否。需要的可以选y;

出现 Packages installed successfully的代表安装成功了。

4. 安装DevUI

npm i ng-devui

项目中一般用会用到字体库，使用以下命令安装：

npm i @devui-design/icons

使用以下命令启动应用：

npm run dev

5. 导入 DevUI 模块

在根目录下的 angular.json 的 styles 属性数组中添加 DevUI 样式：

在 src/styles.scss 中添ng-devui样式变量：

配置应用以支持 DevUI， 由于ang在src/app.config.ts添加动画支持：

在组件中使用 DevUI 组件，在 app.component.ts 中导入需要的DevUI 模块

从新刷新后，按钮就可以显示了：

参考资源

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

总结

本文介绍了基于 Angular 18 和华为云 DevUI 的项目搭建流程，主要包括：

1. 环境准备：Node.js 20+ 和 npm
2. 安装 Angular CLI：全局安装 Angular CLI 18
3. 项目初始化：在当前目录创建 Angular 项目，选择 SCSS样式
4. 安装 DevUI：安装 ng-devui 和 @devui-design/icons
5. 启动项目：使用 npm start 启动开发服务器
6. 配置：如何在项目中排位置DevUI
7. 完成以上步骤后，即可在项目中使用 DevUI 组件。后续可在组件中导入所需模块，开始开发。