npm 包 yox-common 使用教程

简介

yox-common 是一款基于 Vue.js 的通用组件库，主要用于前端开发中的 UI 构建和表单验证。它包含了大量的 UI 组件和验证器，可以帮助开发者快速构建出符合现代 UI 风格的网站，并提高开发效率和代码质量。

安装

在终端中运行以下命令即可安装 yox-common：

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

使用

引入组件和验证器

在要使用组件和验证器的页面中，可以按如下方式引入 yox-common：

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

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

使用组件

以 Button 组件为例，使用方式如下：

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

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

使用验证器

以 EmailValidator 为例，使用方式如下：

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

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

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

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

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

示例代码

Button 组件：

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

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

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

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

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

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

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

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

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

--

---------

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

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

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

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

EmailValidator：

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

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

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

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

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

--

结语

yox-common 是一款优秀的基于 Vue.js 的 UI 组件库和表单验证器库，可以帮助开发者快速构建出符合现代 UI 风格的网站，并提高开发效率和代码质量。在使用过程中，遇到问题可以参考官方文档或社区讨论。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/56984

阅读全文

猜你喜欢

  • npm 包 pngquant-bin-wrapper 使用教程

    在前端开发中，我们经常需要对图片进行压缩处理，以降低页面加载时间和提高用户体验。其中一种常用的方式是使用 pngquant 工具对 PNG 图片进行有损压缩。但是在前端项目中，我们无法直接调用 png...

    6 年前
  • npm 包 image-compress 使用教程

    在前端开发中，对于图片的处理是不可避免的。而图片体积过大会直接影响页面的加载速度，因此需要对图片进行压缩以提高页面性能。本文将向大家介绍如何使用 npm 包 image-compress 来进行图片压...

    6 年前
  • npm 包 requirejs-text 使用教程

    随着前端技术的不断发展，前端项目管理和代码组织变得越来越复杂。而 npm 包的出现为我们提供了良好的解决方案。在前端开发中，我们经常需要在 JavaScript 文件中引入一些 HTML、CSS、模板...

    6 年前
  • npm 包 jsmart 使用教程

    前言 JavaScript 是一门非常灵活的编程语言，但是当它被用来生成 HTML 页面时，我们就需要在数据和 HTML 代码之间进行转换。为了更加方便地进行这种转换，我们可以使用模板引擎。

    6 年前
  • npm 包 ftp-test-server 使用教程

    简介 ftp-test-server 是一个基于 Node.js 的 npm 包，用于搭建本地测试的 FTP 服务器，方便前端开发人员在本地进行文件上传和下载等操作，提高开发效率。

    6 年前
  • npm 包 jsftp-mkdirp 使用教程

    什么是 npm 包 jsftp-mkdirp npm 包 jsftp-mkdirp 是一个基于 jsftp 的扩展包，它提供了一个能够创建远程 FTP 服务器上多层目录的 mkdirp 函数，它有助于...

    6 年前
  • npm 包 peach_html_production 使用教程

    在前端开发中，我们经常需要将 HTML 页面进行优化处理，以提高页面的性能和加载速度。这时候就可以使用 peach_html_production 这个 npm 包来帮助我们实现这一功能。

    6 年前
  • npm 包 git-clone 使用教程

    简介 npm 是一个非常强大的工具，可以让前端工程师更加高效地管理代码依赖。git-clone 这个 npm 包可以帮助我们在 Node.js 中使用 Git 命令来克隆 Git 仓库。

    6 年前
  • npm 包 download-git-repo 使用教程

    在前端开发中，我们常常需要从 Github 或 Gitlab 等代码托管平台上下载代码，并将其用于项目中。这时，download-git-repo 这个 npm 包就会派上用场了。

    6 年前
  • npm包relateurl使用教程

    在前端开发中，我们经常需要处理URL相关的问题。npm包relateurl是一个强大的工具，它可以帮助我们解决一些复杂的URL转换问题，包括相对路径、绝对路径和协议转换等。

    6 年前
  • npm 包 log-progress 使用教程

    在前端开发中，我们经常需要处理大量数据或者在页面渲染时显示进度条。为了方便开发者，社区中出现了很多帮助开发者实现这些功能的 npm 包，其中就有一个非常实用的 npm 包 log-progress。

    6 年前
  • npm 包 connect-logger 使用教程

    在前端开发中，往往需要处理来自用户的请求和响应，以及相应的错误信息和日志记录等问题。这就需要时常使用到一些工具和中间件，以便更好地处理和管理这些信息。其中，connect-logger 是一个非常优秀...

    6 年前
  • npm 包 lite-server 使用教程

    前言 lite-server 是一款基于 Node.js 和 BrowserSync 实现的轻量级开发服务器，可以用来快速搭建一个本地的开发环境，使开发者可以更加高效地进行前端开发。

    6 年前
  • npm包jet-js-cli使用教程

    Jet-JS是一款轻量级的JavaScript库，可用于快速构建Web应用程序。Jet-JS-CLI是一种命令行工具，可使您更轻松地使用Jet-JS库。在本文中，我们将学习如何使用npm包jet-js...

    6 年前
  • npm 包 spdx-licenses 使用教程

    什么是 spdx-licenses spdx-licenses 是一个 npm 包，提供了简洁易懂的开源许可证标识符和全称的列表。使用它可以方便地确定所使用的开源许可证，并在项目中注明许可证信息，确保...

    6 年前
  • npm 包 stream-recorder 使用教程

    简介 stream-recorder 是一个基于 Node.js 的 npm 包，旨在为用户提供录制音频流的功能。使用该包可以轻松地将网络上的音频流录制下来，常用于下载音频课程、播客等。

    6 年前
  • npm 包 stream-from-promise 使用教程

    在前端开发过程中，我们通常需要使用一些异步的数据流来处理数据，而 stream-from-promise 就是一个非常方便的 npm 包，可以将 Promise 对象转换为可读流（Readable S...

    6 年前
  • npm 包 closure-linter-wrapper 使用教程

    前言 在前端开发中，代码质量的好坏是一个很重要的指标。而代码质量的保证往往需要依赖于代码规范的制定和遵守。Google 提出了 Closure Linter 规范，它可以帮助我们制定良好的代码规范，并...

    6 年前
  • npm 包 grunt-gjslint 使用教程

    在前端开发中，代码质量非常重要。而在代码质量的检查中，使用 linter 工具是一种很好的方式。gjslint 是 Google 开源的 JavaScript 代码检查工具，可以检查代码风格、语法错误...

    6 年前
  • npm 包 grunt-git-status 使用教程

    在前端开发中，版本控制是必不可少的步骤。而 Git 是大多数团队选择的版本控制工具之一。在使用 Git 进行项目开发时，经常需要查看当前状态和文件更改情况。这时，grunt-git-status 就是...

    6 年前

相关推荐

    暂无文章