ng-devui 项目安装与配置指南

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 规则、设计语言和最佳实践，使得开发者能够更加专注于应用逻辑的开发，而设计师则专注于用户体验、交互和流程设计。

该项目主要使用 TypeScript、HTML、SCSS 和 CSS 等编程语言。

2. 项目使用的关键技术和框架

本项目使用以下关键技术和框架：

• Angular: 一个用于构建客户端应用的框架。
• TypeScript: JavaScript 的一个超集，添加了静态类型选项。
• SCSS: CSS 的预处理器，提供了变量、嵌套规则、混合宏（mixins）等功能。
• ESLint: 一个插件化的JavaScript代码检查工具。
• Prettier: 一个代码格式化工具。

3. 项目安装和配置准备工作

在开始安装之前，请确保您的系统中已经安装以下工具：

• Node.js：本项目依赖于 Node.js 环境进行包管理和构建任务。
• npm：Node.js 的包管理工具。
• Angular CLI：Angular 的命令行工具，用于初始化、开发、构建和测试 Angular 应用。

详细安装步骤

1. 创建新的 Angular 项目：

   打开命令行工具，运行以下命令创建一个新的 Angular 项目：

   ng new MyAngularProject
   

   替换 MyAngularProject 为您喜欢的项目名称。

2. 导航到项目目录：

   创建项目后，进入项目目录：

   cd MyAngularProject
   

3. 安装 ng-devui：

   在项目目录中，运行以下命令安装 ng-devui：

   npm i ng-devui
   

4. 安装字体图标库（可选）：

   若需要使用字体图标库，运行以下命令：

   npm i @devui-design/icons
   

5. 配置 Angular 项目以使用 ng-devui：

   打开 angular.json 文件，在 styles 数组中添加以下路径：

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

6. 在应用模块中导入 ng-devui：

   打开 app.module.ts 文件，导入 DevUIModule 并在 @NgModule 装饰器的 imports 数组中添加它：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { DevUIModule } from 'ng-devui';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
       DevUIModule
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

7. 启动开发服务器：

   运行以下命令启动开发服务器并打开浏览器：

   ng serve --open
   

   现在，您的 Angular 应用已经配置好并准备使用 ng-devui 组件库了。

确保按照上述步骤操作，您应该能够成功安装和配置 ng-devui。如果在安装过程中遇到任何问题，可以查看项目的 README.md 文件或访问 Angular 和 ng-devui 的官方文档获取更多帮助。

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