简介
preact-h5-ui 是基于 Preact 框架开发的移动端 UI 组件库，它兼容 React 的 API，具有轻量化、快速构建、易于定制等优势。preact-h5-ui 中包含了各种基础组件、业务组件、动画组件等，方便开发者快速构建移动端应用。
安装
使用 npm 安装 preact-h5-ui：
npm install preact-h5-ui --save
注：preact-h5-ui 依赖 preact 和 preact-compat，所以需要先安装它们：
npm install preact preact-compat --save
使用
对于每个组件，我们都需要从 preact-h5-ui 中引入：
import { Button } from 'preact-h5-ui';或者，你可以直接引入所有组件而不必担心打包体积过大：
import * as H5UI from 'preact-h5-ui';
const { Button, Cell } = H5UI;组件
Button
Button 组件用于展示一个可点击的按钮，支持多种类型和不同状态：
default：默认按钮样式primary：主要按钮样式warning：警告按钮样式danger：危险按钮样式link：文字链接样式
-- -------------------- ---- -------
------ - ------ - ---- ---------------
----- ---- - -- -- -
------ -
-----
------------------------
------- -------------------------------
------- -------------------------------
------- -----------------------------
------- -------------------------
------- ----------- -------------------------------------------
------
--
--Cell
Cell 组件用于展示一行信息，支持标题、描述、额外内容，并且支持点击事件：
-- -------------------- ---- -------
------ - ---- - ---- ---------------
----- ---- - -- -- -
----- ----------- - -- -- -
-----------------------
--
------ -
-----
----- ------------- ----------- --
----- ------------- ----------- ------------ -------- --
----- ------------- ----------- --------------------- --
------
--
--打包体积优化
为了减小打包体积，我们可以只引入我们需要的组件：
import Button from 'preact-h5-ui/lib/Button';
或者，使用 babel-plugin-import，它可以在打包时自动按需加载组件：
-- -------------------- ---- -------
-
---------- -
-
---------
-
-------------- ---------------
------------------- ------
-------------------------- -----
-
-
-
-总结
preact-h5-ui 是一个优秀的移动端 UI 组件库，提供了各种基础组件、业务组件、动画组件等，方便开发者快速构建移动端应用。我们可以通过 npm 安装和引入，然后按需使用组件，也可以通过打包体积优化减小打包体积。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382267d