简介
h-naya-web 是一个基于 Vue.js 的前端 UI 组件库，拥有众多常用的 UI 组件，如按钮、表单、布局等，并支持主题定制。
安装
在项目目录下执行以下命令：
npm install h-naya-web --save
引用
全局引用
在入口 JS 文件中，使用以下代码引入 h-naya-web：
import HNayaWeb from 'h-naya-web' Vue.use(HNayaWeb)
按需引用
如果你只需要部分组件，可以使用 babel-plugin-component 来进行按需引入。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，在 .babelrc 中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
------------
-
-------------- -------------
-------- -----
-
-
-
-最后，在需要使用组件的地方，按如下方式引用：
import { HnButton, HnInput } from 'h-naya-web'使用示例
以下是 h-naya-web 中常用组件的使用示例。
Button
-- -------------------- ---- -------
----------
-----
---------- -----------------------------------
------
-----------
--------
------ ------- -
-------- -
------------- -
-- -- ---------
-
-
-
---------Input
-- -------------------- ---- -------
----------
-----
--------- --------------- -----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
-
-
-
---------Table
-- -------------------- ---- -------
----------
-----
--------- ------------------ ------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
-
------ -----
---- ------
--
-
------ -----
---- -----
--
-
------ -----
---- ---------
-
--
----- -
-
----- -----
---- ---
-------- --------
--
-
----- -----
---- ---
-------- ---------
--
-
----- -----
---- ---
-------- --------
-
-
-
-
-
---------主题定制
h-naya-web 支持主题定制，如果您需要定制主题，可以在项目中创建一个 scss 文件，然后引入 h-naya-web 中的 _variables.scss 文件，并覆盖相应的变量即可。
-- -------------------- ---- ------- -- --------- -------------- -------- ---------------- -------- -------------- -------- ------------- -------- -------------- -------- -- -- ---------- ---- ------- ------------------------------------- -- ---- --------- -------------- -- ------ ------- --------------------------------
结语
通过本文，您已经学会了使用 h-naya-web，同时也了解了如何通过按需引入和主题定制来减少项目的代码量和提高开发效率。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e70520b171f02e1e23