Skip to content

DevUI Admin:0行代码搭建后台管理系统 #20

Description

@kagol

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

最终效果如下:
image

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

步骤:

  1. 全局安装 Angular 15:npm i -g @angular/cli@15
  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 15

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

npm i -g @angular/cli@15

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

预览效果:
image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions