什么是 hable
hable 是一个 Vue.js 组件库，提供了常用的 UI 组件，比如按钮、输入框等等。此外，hable 还提供了很多实用的 mixins 和工具函数，帮助开发者快速搭建 Web 应用程序。
hable 的组件库和文档均已经上传到了 npm 包管理器上，可以通过 npm 命令安装到项目中使用。
安装 hable
安装 hable 非常简单，只需要执行以下命令即可：
npm install hable --save
安装完毕后，在项目中引入 hable 的 main.css 和 Vue.js，然后按需引入需要使用的组件即可。
-- -------------------- ---- -------
---- -- -------- ---
----- ---------------- ----------------------------------------
---- -- ------ ---
------- ------------------------------------------------
---- --------- ---
--------
------ - ------- ------ ----- - ---- --------
------ ------- -
----------- -
----------- -------
---------- ------
--
------- - ----------- --
-
---------hable 组件和 mixins
hable 组件
hable 提供的组件非常丰富，包括但不限于：
- Button：按钮组件
- Input：输入框组件
- Checkbox：复选框组件
- Radio：单选框组件
- Switch：开关组件
- Tabs & TabPane：标签页组件
- Message：提示框组件
下面是一个使用 hable Button 组件的示例：
-- -------------------- ---- -------
----------
-----
---- ---- ---
-------------------------
---- ---- ---
--------- ------------------------------
---- ---- ---
--------- ------------------------------
---- ----- ---
--------- ----------------------------
---- ---- ---
--------- ------------------------------
---- ---- ---
--------- -----------------------------
---- ---- ---
--------- --------------------------------
------
-----------
--------
------ - ------ - ---- --------
------ ------- -
----------- -
----------- -------
--
-
---------
-------
-- ------- --
------- -----------------------------------
-- ------- --
-------- -
------------- -----
-
--------hable mixins
除了组件库，hable 还提供了很多实用的 mixins 和工具函数，这些 mixins 可以帮助我们更快捷地书写代码。
比如，Mixin.Focus 这个 mixins 可以帮助我们在页面加载时自动聚焦到某个输入框上，使用方法非常简单：
-- -------------------- ---- -------
----------
-------- ------------------
-----------
--------
------ - ------ ----- - ---- --------
------ ------- -
----------- -
---------- ------
--
------- - ----------- --
-
---------当页面加载后，上面的输入框可以自动聚焦。
hable 工具函数
除了组件和 mixins 外，hable 还提供了一些实用的工具函数，这些函数可以帮助我们更加快捷地编写代码。
下面是一个使用 hable 工具函数的示例：
-- -------------------- ---- -------
----------
-----
-- ----------------------- --
------
-----------
--------
------ - ---- - ---- --------
------ ------- -
-------- -
------------------ -
------ ------------------------
--
--
-
---------上面的代码可以将 1234567.89 格式化为 1,234,567.89 显示在页面上。
总结
hable 是一个非常实用的 Vue.js 组件库，它提供了非常丰富的 UI 组件、mixins 和工具函数，可以帮助我们更快捷地开发 Web 应用程序。如果你还没有学习和使用 hable，那么赶快试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc16ab5cbfe1ea0611dbd