简介
@upe/ngx-admin 是一个基于 Angular 和 Bootstrap 的开源后台管理系统模板，提供了丰富的组件和页面模板。本文将介绍如何使用 npm 包 @upe/ngx-admin 来快速搭建自己的后台管理系统。
安装
安装 @upe/ngx-admin 的方法如下：
npm install @upe/ngx-admin --save
这将安装 @upe/ngx-admin 包，并在 package.json 文件中添加依赖项：
"dependencies": {
"@upe/ngx-admin": "^1.0.0"
}使用
在安装完成后，我们就可以开始使用 @upe/ngx-admin 了。在 app.module.ts 文件中引入 NgxAdminModule：
-- -------------------- ---- -------
------ - -------------- - ---- -----------------
-----------
-------- -
--------------
--
---
--
------ ----- --------- - -这将导入所有的 ngx-admin 组件和页面，并可在应用中使用。
组件
@upe/ngx-admin 提供了很多组件，下面介绍其中几个：
表格组件
表格组件 ngx-table 可以通过以下方式引入：
-- -------------------- ---- -------
------ - ----------------- - ---- -----------------
------------
--------- -
---------- ------------------- --------------------------
-
--
------ ----- ----------- -
------- - ------ ------- ---------------
---- - -
- --- -- ----- -------- ------------ -- ------ --
- --- -- ----- --------- ------------ -------- ------ --
- --- -- ----- --------- ------------ -- ------ ------ --
--
-表单组件
表单组件 ngx-form 可以通过以下方式引入：
-- -------------------- ---- -------
------ - ---------------- - ---- -----------------
------------
--------- -
--------- ----------------- ---------------------------------------
-
--
------ ----- ----------- -
------ - -
- ----- ------- ------ ----------- ----- ----------- --------- ---- --
- ----- ----------- ------ ----------- ----- ----------- --------- ---- --
- ----- --------- ------ -------- --
--
-------------- -
------------------
-
-按钮组件
按钮组件 ngx-button 可以通过以下方式引入：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------
------------
--------- -
----------- -------------- ---- ---------------------------------
-
--
------ ----- ----------- -
--------- -
-----------------------
-
-页面
@upe/ngx-admin 同时提供了很多页面模板，下面介绍其中几个：
登录页面
登录页面 login 可以通过以下方式引入：
import { LoginComponent } from '@upe/ngx-admin';
@Component({
template: `
<ngx-login></ngx-login>
`
})
export class MyComponent { }注册页面
注册页面 register 可以通过以下方式引入：
import { RegisterComponent } from '@upe/ngx-admin';
@Component({
template: `
<ngx-register></ngx-register>
`
})
export class MyComponent { }首页
首页 dashboard 可以通过以下方式引入：
import { DashboardComponent } from '@upe/ngx-admin';
@Component({
template: `
<ngx-dashboard></ngx-dashboard>
`
})
export class MyComponent { }结语
以上是本文对 @upe/ngx-admin 包的简单介绍和使用方法，希望对大家有所帮助。当然，@upe/ngx-admin 还有很多其他的组件和页面模板，建议大家多去查看官方文档和源码，深入了解并使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2a81e8991b448dae0b