Angular UI 组件库 ng-devui 使用教程

Angular UI 组件库 ng-devui 使用教程

ng-devui Angular UI Component Library based on DevUI Design 项目地址: https://gitcode.com/gh_mirrors/ng/ng-devui

1. 项目介绍

ng-devui 是一个基于 DevUI 设计系统的 Angular UI 组件库。DevUI 设计系统融合了 DevUI 规则、设计语言和最佳实践，使得开发者可以更专注于应用逻辑的开发，而设计师可以专注于用户体验、交互和流程设计。ng-devui 提供了企业级组件，支持设计规范和字体图标库，适用于构建现代化的 Angular 应用程序。

2. 项目快速启动

创建新项目

首先，使用 Angular CLI 创建一个新的项目：

ng new New-Project

安装 ng-devui

接着，进入新创建的项目目录，并安装 ng-devui 和字体图标库：

cd New-Project
npm i ng-devui
npm i @devui-design/icons

引入模块

在 app.module.ts 文件中引入必要的模块：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { DevUIModule } from 'ng-devui';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DevUIModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

引入样式

在 angular.json 文件中，添加 ng-devui 的样式路径到 styles 数组：

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

启动项目

最后，启动项目并查看结果：

ng serve --open

3. 应用案例和最佳实践

在构建应用时，可以参考以下最佳实践：

• 使用 ng-devui 提供的组件来保持界面的一致性和专业性。
• 利用 DevUI 设计系统的图标库来丰富应用的视觉效果。
• 遵循 Angular 的最佳实践，例如使用模块化的代码结构、服务和依赖注入。

4. 典型生态项目

ng-devui 作为 Angular 生态的一部分，可以与其他项目配合使用，例如：

• H5-Dooring：一个简化 H5 制作的框架。
• 其他 Angular UI 组件库，如 ngx-translate 用于国际化，ng-bootstrap 用于 Bootstrap 集成等。

通过结合这些项目，可以构建更加丰富和功能完备的应用程序。

ng-devui Angular UI Component Library based on DevUI Design 项目地址: https://gitcode.com/gh_mirrors/ng/ng-devui