本篇文章旨在介绍 npm 包 wheelhouse-core 的使用方法。wheelhouse-core 是一个前端组件库，提供了一系列的组件和工具，帮助开发者快速构建专业的前端应用程序。
安装
npm
在项目根目录下打开终端，使用如下命令安装 wheelhouse-core：
npm install wheelhouse-core
安装完成后，你可以在项目的 node_modules 目录下找到 wheelhouse-core 的代码。
如果你需要在项目中使用 wheelhouse-core 的组件或工具，你需要在你的 JS 文件中引入。
CDN
如果你不想通过 npm 安装 wheelhouse-core，你也可以使用 CDN 方式加载 wheelhouse-core 的代码。
<!-- wheelhouse-core styles --> <link rel="stylesheet" href="https://unpkg.com/wheelhouse-core/dist/styles.css"> <!-- wheelhouse-core scripts --> <script src="https://unpkg.com/wheelhouse-core/dist/scripts.js"></script>
使用
下面我们将介绍 wheelhouse-core 的使用方法。
组件
Card
Card 是一个卡片组件，默认提供了标题、内容、页脚等元素。
<div class="whc-card"> <div class="whc-card-header">标题</div> <div class="whc-card-body">内容</div> <div class="whc-card-footer">页脚</div> </div>
Button
Button 是一个按钮组件，默认提供了基本样式和监听点击事件的功能。
<button class="whc-button">按钮</button>
Table
Table 是一个表格组件，默认提供了排序、分页等功能。
-- -------------------- ---- -------
------ ------------------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
----
-----------
-----------
-----
--------
--------工具
HTTP
HTTP 是一个 Ajax 工具，可以通过 HTTP 类提供的方法发送 GET、POST 请求，获取返回数据。
import { HTTP } from 'wheelhouse-core';
const http = new HTTP();
http.get('/api/user').then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});Router
Router 是一个路由工具，可以实现前端路由和页面跳转的功能。
-- -------------------- ---- -------
------ - ------ - ---- ------------------
----- ------ - --- --------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
---
---------------示例代码
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------------
----- ---------------- ---------------------------------------------------------
------- -----------------------------------------------------------------
-------
------
---- -----------------
---- --------------------------------
---- ------------------------------
---- ------------------------
------- ------------------------------
------- ------------------------------
------
------
------ ------------------
-------
----
-----------
-----------
-----
--------
-------
----
-----------
-----------
-----
----
-----------
-----------
-----
--------
--------
--------
----- ---- - --- -----------
------------------------------------- -- -
----------------------
---------------- -- -
---------------------
---
----- ------ - --- ------------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- -
-
---
---------------
---------
-------
-------结语
本篇文章介绍了 wheelhouse-core 的使用方法，包含组件和工具的示例代码，希望能够帮助到前端开发者。如果你对本文有任何疑问或反馈，请在评论中告诉我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0c9