前言
在前端开发中，常常需要使用各种工具和框架来完成特定的需求。npm 是前端开发者最常用的包管理工具之一，其中 rucken 是一个基于 Angular 的工具集，提供了许多常用的 UI 组件、服务和模块，可以大大加快开发效率。
本篇文章将介绍 rucken 的基本用法，并通过实例演示如何使用它来构建一个简单的前端应用。
安装
使用 npm 可以方便地安装 rucken，只需要运行以下命令：
npm install rucken --save
使用
安装完 rucken 后，我们可以在项目中引入它的各个组件来完成特定的需求。下面我们将介绍其中几个常用的组件。
表单组件
rucken 提供了丰富的表单组件，包括输入框、下拉框、单选框等等。其中最常用的是输入框组件，可以通过以下方式引入：
import { FormViewInputComponent } from 'rucken';然后在模板中使用它：
<form-view-input-component label="用户名"></form-view-input-component>
这样就可以渲染出一个带有标签的输入框了。
布局组件
除了表单组件，rucken 还提供了许多布局组件，用于控制页面结构和样式。其中比较常用的是栅格布局组件，可以将页面分成若干列和行，方便地控制不同元素的位置和大小。
要使用栅格布局组件，可以先引入它：
import { GridComponent } from 'rucken';然后在模板中使用它：
<grid-component>
<div class="col-md-6">左侧内容</div>
<div class="col-md-6">右侧内容</div>
</grid-component>这样就可以将页面分成两列，左侧宽度占 6 个栅格，右侧宽度也占 6 个栅格。
网络请求
在实际开发中，我们通常需要向后端发送网络请求，并根据返回结果进行相应的操作。rucken 提供了一个封装了 Angular HttpClient 的服务，可以方便地进行网络请求。
首先，需要引入 HttpClientModule：
import { HttpClientModule } from '@angular/common/http';然后在 app.module.ts 中添加它：
-- -------------------- ---- -------
-----------
-------- -
--------------
----------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -然后就可以在组件中使用 HttpClient 了：
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ ----- ----------- -
------------
------- ----- ----------
- - -
---------- -
--------------------------------------------------
----------------- ---- -- -
------------------
---
-
-这里先定义了一个 loadData 方法，用于发送 GET 请求并订阅响应。当收到响应时，会在控制台输出返回的数据。
示例
下面我们通过实现一个简单的登录界面来演示如何使用 rucken。
布局
登录界面通常包含输入框和按钮两个基本元素，我们可以使用 rucken 的 GridComponent 和 FormViewInputComponent 分别实现它们的布局。
首先在模板中引入它们：
-- -------------------- ---- -------
----------------
---- -----------------
-------------------------- ----------------------------------------
-------------------------- ---------------------------------------
------
---- -----------------
---------------------------------------
------
-----------------这里将页面分成了两列，左侧放置了两个输入框，右侧放置了一个登录按钮。
样式
为了美化界面，可以使用 rucken 的样式组件。这里我们使用 rucken-theme 中的样式。
首先，安装 rucken-theme：
npm install rucken-theme --save
然后在 app.module.ts 中引入它：
import 'rucken-theme';
这样就可以使用 rucken-theme 中的样式了，比如给登录按钮添加样式：
<button-component class="primary">登录</button-component>
这里使用了 primary 样式，使登录按钮变成蓝色。
操作
最后，实现登录按钮被点击后的逻辑。首先需要在组件中引入 HttpClient：
import { HttpClient } from '@angular/common/http';然后定义一个 login 方法用于向后端发送登录请求：
-- -------------------- ---- -------
------ ----- -------------- -
--------- -------
--------- -------
------------
------- ----- ----------
- - -
------- -
---------------------------------------------------- -
--------- --------------
--------- -------------
------------------- ---- -- -
------------------
---
-
-这里向后端 POST 了一个登录请求，传递了用户名和密码两个参数。当收到响应时，会在控制台输出返回的数据。
最后将 login 方法绑定在登录按钮上：
<button-component class="primary" (click)="login()">登录</button-component>
现在可以运行这个应用了，输入用户名和密码并点击登录按钮，应该可以看到返回的数据被打印在控制台上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562cb81e8991b448e0137