Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kagol opened this issue Feb 17, 2022 · 4 comments
Closed

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

kagol opened this issue Feb 17, 2022 · 4 comments
Labels
good first issue Good for newcomers

Comments

@kagol
Copy link
Member

kagol commented Feb 17, 2022

本文将手把手教你使用 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

@kagol kagol changed the title 0行代码、5条命令:使用 DevUI Admin 从0到1搭建一个美观大气的后台管理系统,并添加一个功能强大的表格页面 DevUI Admin:0代码搭建后台管理系统 Feb 17, 2022
@kagol kagol changed the title DevUI Admin:0代码搭建后台管理系统 DevUI Admin:0行代码搭建后台管理系统 Feb 24, 2022
@wangyaju wangyaju added the good first issue Good for newcomers label Mar 29, 2023
@wangyaju wangyaju pinned this issue Mar 29, 2023
@soulary233
Copy link

使用angular-cli 15.2.7创建新工程,默认不会在工程下自动生成environments目录,需要执行ng generate environments,并在environment-*.ts文件里添加production属性,不然启动项目会报错

@Mr-Peanut
Copy link

image
无法插入区块,不管是用示例项目或者自己项目中均报“Could not find an NgModule. Use the '--skip-import' option to skip importing in NgModule.”
按照官方的说明,仍报这个错误
image

@ricenoddle
Copy link
Collaborator

使用angular-cli 15.2.7创建新工程,默认不会在工程下自动生成environments目录,需要执行ng generate environments,并在environment-*.ts文件里添加production属性,不然启动项目会报错

谢谢提醒,ng15通过 ng new 生成的新项目中移除了enviroment 这个文件夹,我们已经做了兼容,最新版为 15.1.0

@ricenoddle
Copy link
Collaborator

image 无法插入区块,不管是用示例项目或者自己项目中均报“Could not find an NgModule. Use the '--skip-import' option to skip importing in NgModule.” 按照官方的说明,仍报这个错误 image

该问题已经修复,可以查看最新版 15.1.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

5 participants