华为云 DevUI初体验：如何快速入门项目搭建

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

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

验证安装：

powershell 复制代码

ng version

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

powershell 复制代码

ng new New-Project

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

powershell 复制代码

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

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

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

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

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

powershell 复制代码

npm i ng-devui

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

powershell 复制代码

npm i @devui-design/icons

使用以下命令启动应用：

powershell 复制代码

npm run dev

在根目录下的 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 的项目搭建流程，主要包括：