在前端开发领域中，使用 npm 包（Node.js 包管理器）可以为我们快速构建项目带来很多便利。legao-component 是一款满足前端开发需求的npm包，本文将详细介绍如何使用 legao-component 包，并提供一些示例代码。
什么是 legao-component
legao-component 是由李云龙开发的一款前端开发工具，主要用于UI组件的封装，满足前端开发中快速构建页面与组件的需求。经过多次升级迭代，现在的 legao-component 支持React、Vue等主流框架，用户可以根据自己的需求进行选择使用。
与其他UI组件类npm包相比，legao-component 更注重开发者与实际应用的思考与需求，封装出更适合绝大多数网站实际开发的组件，而不仅仅是一款精美的组件库。
如何使用 legao-component
在开始使用 legao-component 之前，你需要先安装 Node.js 或者 yarn，以及 npm 包管理工具。接下来我们来看一下如何使用 legao-component。
安装 legao-component
在命令行中使用下面的命令安装 legao-component：
npm install legao-component --save
或
yarn add legao-component
引入 legao-component
在使用前需要引入 legao-component：
import { Button, Modal } from 'legao-component';使用 legao-component
legao-component 中包含许多对于前端开发非常常见的UI组件，例如 Button、Modal、Input 等等。你可以根据自己的需求引入相应的组件，然后就可以愉快地使用它们了。
Button
<Button type="primary" size="large" onClick={this.handleClick}>
点我一下
</Button>Modal
<Modal
title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<p>对话框内容</p>
</Modal>Input
<Input placeholder="请输入内容" />
完整实例
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ----- - ---- ------------------
----- --- ------- --------------- -
----- - -
-------- ------
-
----------- - --- -- -
-------------------- ---
---------------
-------- -----
---
-
-------- - --- -- -
----------------- ---
---------------
-------- ------
---
-
------------ - --- -- -
--------------------- ---
---------------
-------- ------
---
-
-------- -
------ -
-----
------- -------------- ------------ ---------------------------
----
---------
------
-------------
-----------------
--------------------
----------------------------
-
------------
------ ---------------------
--------
------
-
-
-
------ ------- ----总结
legao-component 是一款前端UI组件的封装工具。在使用前，我们需要先进行安装并引入 legao-component。legao-component 中包含许多常见的前端UI组件，例如 Button、Modal、Input 等等，我们可以根据自己的需求引入相应的组件，然后可以愉快地使用它们了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055adf81e8991b448d8864