npm 包 zhaveish 使用教程

阅读时长 6 分钟读完

简介

zhaveish 是一款基于 Vue.js 的 UI 组件库,其提供了一系列常用的 UI 组件,如按钮、输入框、弹窗等,并且还支持自定义主题和语言。

本文将介绍如何使用 zhaveish 组件库,并将通过示例代码演示其基本用法。

安装

要使用 zhaveish,首先需要将其安装至项目中。

在命令行中运行下面的命令:

使用

安装完成后,可以在 Vue 项目中引入 zhaveish。

全局引入

可以通过在 main.js 中将 zhaveish 注册为全局组件的方式来进行引入。

局部引入

也可以通过按需引入的方式来使用 zhaveish。

使用以上方法之一引入后,即可在 Vue 组件中使用 zhaveish 的组件。

示例

下面的示例代码演示了 zhaveish 的 Button 和 Input 组件的基本用法。

-- -------------------- ---- -------
----------
  -----
    ---------------------------
    ---------- -------------------------------
    ---------- -------------------------------
    ---------- -------------------------------
    ---------- ------------------------------

    --------- --------------- -------------------------------
  ------
-----------

--------
------ ------- -
  ------ -
    ------ -
      ------ --
    -
  -
-
---------

自定义主题

zhaveish 支持自定义主题。

首先,在项目中新建一个名为 zhaveish-theme.scss 的文件,在其中定义自己的主题变量。

-- -------------------- ---- -------
---------------- -----

-------------- -
  ---------- --------
  ---------- --------
  ---------- --------
  --------- -------
--

------------ --------
------------- -----------

-- ------
----------------- ----
------------------- ----
------------------------ -----
------------ -----
------------------- -----
------------------------------ -------------------------
------------------- -----
------------------------------ -------------------------
------------------- -----
------------------------------ -------------------------
------------------ -----
----------------------------- ------------------------

-- -----
------------------- ------------
----------------- ---------------- - -----
----------------- ----------------- - ------
----------------------------- ----
--------------------------- ----
--------------------------- ----
----------------------------- -----
----------------------------- -----

-- ---

然后,在 main.js 中导入上面定义的 zhaveish-theme.scss 文件。

自定义语言

zhaveish 还支持自定义语言。默认英文为主语言,支持简体中文和繁体中文。

可以通过在项目中新建一个名为 zhaveish-i18n.js 的文件,并在其中定义自己的语言配置。例如:

-- -------------------- ---- -------
------ ----- ---- --------------------------------

------ ------- -
  ---------

  --- -
    ------- -
      --- -----
      ------- ----
    -
  -
-

里面定义了一个名为 zv 的对象,可以在其中定义自己相关的翻译内容。

然后,在 main.js 中导入上面定义的 zhaveish-i18n.js 文件,并将其绑定到 zhaveish 组件上。

结束语

以上就是 zhaveish 的基本用法及其自定义功能的介绍。

通过学习 zhaveish,可以快速的构建出一个美观、易于使用的 UI 界面。

希望本文可以对你有所帮助,如果有任何问题可以在评论区留言。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600572cc81e8991b448e8fd1

纠错
反馈