DevUI Admin：0行代码搭建后台管理系统

[kagol]

本文将手把手教你使用 DevUI Admin 快速搭建一个美观大气的后台管理系统，0代码，纯命令行操作。

最终效果如下：

前提条件：在你的电脑安装nodejs

步骤：

1. 全局安装 Angular 12：npm i -g @angular/cli@12
2. 创建 Angular 工程：ng new your-project && cd your-project
3. 添加 DevUI Admin：ng add ng-devui-admin
4. 安装 DevUI 物料库：npm i ng-devui-materials
5. 生成页面和区块：cd src/app/pages/getting-started && ng g ng-devui-admin:views

Step 1：全局安装 Angular 12

DevUI Admin是基于Angular框架的，因此需要先全局安装Angular CLI，主要需要安装 Angular 12版本。

npm i -g @angular/cli@12

Step 2：创建 Angular 工程

有了Angular CLI，就可以创建一个NG工程啦。

ng new your-project && cd your-project

Step 3：添加 DevUI Admin

在一个NG工程中添加DevUI Admin只需要一个命令：

ng add ng-devui-admin

Step 4：安装 DevUI 物料库

DevUI Admin 包含4类19个区块，目前所有区块都在DevUI物料库中，这部分是可扩展的。

因此要使用Admin区块，需要先安装这个物料库：

npm i ng-devui-materials

Step 5：生成页面和区块

cd src/app/pages/getting-started && ng g ng-devui-admin:views

在浏览器地址栏访问： http://localhost:4200/pages/getting-started/my-table

预览效果：