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