什么是 relei
relei 是一个基于 React 的 UI 组件库，提供了一系列常用的组件，包括按钮、表单、弹窗等等。使用 relei 可以快速搭建一个基于 React 的页面。本文将介绍如何使用 relei。
安装
使用 npm 安装 relei：
npm install --save relei
安装完成后，就可以在项目中引用 relei 了。
引用
在项目中引用 relei 的方式有如下三种：
方式一：全局引用
在你的项目入口文件中全局引入 relei 样式文件和组件：
import 'relei/dist/relei.css';
import { Button } from 'relei';使用时直接调用组件即可：
<Button>按钮</Button>
方式二：按需引用
使用 react-loadable 和 babel-plugin-import 实现按需引入组件。
安装依赖：
npm i babel-plugin-import react-loadable -D
修改配置
在 .babelrc 文件添加：
{
"plugins": [
["import", {
"libraryName": "relei",
"libraryDirectory": "es/components"
}]
]
}在需要动态引入组件的文件中，使用 react-loadable：
-- -------------------- ---- -------
------ -------- ---- -----------------
------ - ---- - ---- -------
----- ------ - ----------
------- -- -- --------------------------
-------- -----
---
----- --- ------- --------------- -
-------- -
------ -------------------------------
-
-方式三：DIY
按需引入部分组件，其它组件自己实现。这种方式可减小打包后文件的大小，但需要我们自己实现一些组件。
示例
下面展示一个使用 relei 的示例：
-- -------------------- ---- -------
------ -----------------------
------ ----- ---- --------
------ - ----- ------ ------ - ---- --------
----- --- ------- --------------- -
------------ - - -- -
-------------------
------------------------------------ ------- -- -
-- ------ -
--------------------- ------ -- ----- -- --------
-
---
--
-------- -
----- - ----------------- - - ----------------
------ -
----- ---------------------------- -----------------------
-----------
------------------------------ -
------ -- --------- ----- -------- ------- ----- ---- ---------- ---
---
------
------------- ----------- -------- ------ ----------------- -- ---
----------------------
---
--
------------
-----------
------------------------------ -
------ -- --------- ----- -------- ------- ----- ---- ---------- ---
---
------
------------- ----------- -------- ------ ----------------- -- ---
---------------
----------------------
---
--
------------
-----------
------- -------------- ----------------- ------------------------------
--- --
---------
------------
-------
--
-
-
----- ---------- - ------------- ----- -------------- --------
--------------------------- --- -----------
总结
以上就是使用 relei 的详细介绍，可以根据自己的需求决定使用哪种引用方式。使用 relei 能够增加开发效率，同时减少代码量，让前端开发更加方便快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a630d09270238224ef