在前端开发中，我们经常会用到各种第三方库来实现特定的功能。而 npm 是一个非常常用的 JavaScript 包管理工具，可以让我们轻松地安装、升级和删除依赖的库。在本文中，我们将介绍一个常用的 npm 包 igui，它提供了一些常见的 UI 组件，帮助我们快速搭建网页。
安装 igui
首先，我们需要在本地项目中安装 igui。打开命令行终端，进入你的项目目录，然后输入以下命令：
npm install igui --save
以上命令将 igui 安装到你的项目中，并在 package.json 文件中添加 igui 的依赖。
使用 igui
在 igui 安装完成后，我们就可以在项目中引用 igui 的组件了。
引入样式
我们首先需要将 igui 的样式文件引入到项目中。在项目中，你可以选择使用 igui 提供的 CSS 或者 SASS 样式表，不过在本文中，我们将使用 CSS 样式表：
<!-- 引入 igui 样式表 --> <link rel="stylesheet" href="./node_modules/igui/dist/css/igui.css">
这里的 href 路径是相对于 HTML 文件的。
引入组件
在 igui 中，每个组件都独立成一个可引用的模块。因此，我们需要在需要使用组件的页面中，按照以下方式引入组件：
import { Button, Modal } from 'igui'; 以上代码将 Button 和 Modal 两个组件引入到我们的项目中。在页面中，我们可以像下面这样使用这些组件：
-- -------------------- ---- -------
------
---- ---------------
--------
-- ------ --- --
----- --- - --- -----
--- -------
------ -
------ -
---------- ------
-
--
----------- -
----------- -------
---------- ------
--
---
---------
-------在上面的代码中，我们使用了 Vue 来初始化页面，并在 components 属性中注册了 Button 和 Modal 两个组件。下面我们展示一些常用组件的使用方法。
Button
Button 组件是 igui 最为常用的组件之一，很多页面都需要使用到各种形式的按钮。在 igui 中，Button 组件有以下几个常用的属性：
| 属性 | 说明 |
|---|---|
| type | 按钮类型 |
| size | 按钮大小 |
| icon | 按钮图标 |
| loading | 按钮加载状态 |
| disabled | 按钮禁用状态 |
| plain | 按钮镂空状态 |
| round | 按钮圆角状态 |
| native-type | 原生按钮类型 |
以下是一个使用 Button 组件的示例代码：
<i-button type="primary" size="large" icon="search" @click="search">搜索</i-button>
在上述代码中，我们定义了一个主按钮（type="primary"），比较大的尺寸（size="large"），图标为搜索（icon="search"）。我们还添加了一个 click 事件，用来处理搜索按钮的点击事件。
Modal
Modal 组件是 igui 中比较常用的 UI 组件之一，它用来显示一个模态对话框。在 igui 中，Modal 组件有以下常用属性：
| 属性 | 说明 |
|---|---|
| title | 对话框标题 |
| visible | 对话框可见状态 |
| width | 对话框宽度 |
| closable | 对话框是否可以关闭 |
| ok-text | 确定按钮的文本 |
| cancel-text | 取消按钮的文本 |
| footer-hide | 是否隐藏 Modal 的底部按钮 |
以下是一个使用 Modal 组件的示例代码：
<i-button type="primary" @click="showModal">显示对话框</i-button> <i-modal :visible="showModal" title="标题">这是一个对话框</i-modal>
在上述代码中，我们定义了一个按钮，用来显示 Modal。当按钮被点击时，showModal 的值将被设置为 true，然后对话框就会显示出来。Modal 使用了 visible 属性来判断是否显示，然后我们的逻辑就可以利用这个属性来控制 Modal 的显示和隐藏。
总结
在本文中，我们学习了如何使用 npm 安装 igui，并使用 igui 的组件来创建一个简单的网页。通过学习这些内容，你已经可以开始在你的项目中使用 igui 来加速你的开发了。此外，igui 还提供了许多其它类型的组件，如表单、导航、布局等，我们只是简单介绍了其中一些常用组件。对于 igui 的更多资料，请查阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb481e8991b448dc5df