npm 包 lunchjs 使用教程

简介

lunchjs 是一个基于 Vue 的 UI 库,包含了诸多常用组件,如按钮、表单、弹窗等。lunchjs 方便快捷,使用简单,尤其适合中小型项目的快速开发。

安装

使用 npm 安装 lunchjs 非常简单,只需要在终端中执行以下代码即可:

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

快速上手

在main.js文件中引入lunchjs:

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

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

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

如果您的项目已经使用了一些 UI 库,可以按需引入 lunchjs 组件:

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

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

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

示例

基础按钮

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

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

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

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

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

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

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

普通弹窗

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

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

表单验证

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

结语

lunchjs 是一个优秀的 Vue UI 库,具备丰富的组件和优秀的易用性,相信它会成为你日常工作中的好帮手。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055b8881e8991b448d925e


猜你喜欢

  • npm 包 disk-calc 使用教程

    什么是 disk-calc disk-calc 是一个用于计算磁盘空间的 npm 包。除了简单的总容量计算外,它还可以计算文件夹和文件的大小以及各种单位的转换。使用 disk-calc 可以方便地计算...

    2 年前
  • npm 包 express-mysql-pool 使用教程

    在 Node.js 开发中,MySQL 是一个常用的数据库,而 express-mysql-pool 则是一个优秀的 MySQL 连接池管理工具。本文将介绍如何使用 npm 包 express-mys...

    2 年前
  • npm 包 cz-crm 使用教程

    在开发过程中,我们经常需要使用 version control system 来管理我们的代码。版本控制工具能较好的协调开发团队的代码管理,其中最为重要的部分就是 commit message。

    2 年前
  • npm 包 ngbit 使用教程

    什么是 ngbit ngbit 是一个用于 Angular 应用程序中的依赖注入工具,它提供了一种注入方式,让开发者更加方便、快速地编写 Angular 应用程序。

    2 年前
  • npm 包 gitdate 使用教程

    在前端开发中,我们需要处理各种日期,例如文章发布时间、事件记录等,通常都是使用 JavaScript 自带的 Date 对象来处理。但是,这个对象有些繁琐,有些操作可能需要多行代码才能实现。

    2 年前
  • npm 包 filesweeper 使用教程

    在前端开发过程中,我们经常需要在项目中添加新的文件或删除旧文件。但是,如果没有好的工具,这个过程可能会变得非常繁琐和复杂。npm 包 filesweeper 就是为了解决这个问题而诞生的。

    2 年前
  • npm 包 ngsticky-liberty 使用教程

    介绍 ngsticky-liberty 是一个 AngularJS 的插件,用于创建需要粘性元素的情况,例如固定的导航栏,因此可以在滚动时保持它的位置。ngsticky-liberty 可以帮助开发者...

    2 年前
  • npm 包 postcss-icss-composes 使用教程

    前言 在前端开发中,我们通常会使用 CSS 预处理器来增强 CSS 的功能及可维护性。而在 CSS 预处理器中,使用变量的方式是非常重要的一种。但是,在实际开发中,我们常常会遇到这样的情况:一个组件需...

    2 年前
  • npm 包 eaknoppnut 使用教程

    介绍 eaknoppnut 是一个用于前端开发的 npm 包,它可以帮助开发人员更好地管理应用程序的状态。它基于 Redux 库,并提供了一些便利的功能来简化 Redux 应用程序的开发。

    2 年前
  • npm 包 unitconverter 使用教程

    介绍 在前端开发中,经常需要进行各种单位的转换,比如像像素值、时间、长度、温度等等。unitconverter 是一个专门用于单位转换的 npm 包,可以帮助我们更加方便地操作这些单位,提高我们的工作...

    2 年前
  • npm 包 drizzle.io 使用教程

    在前端开发中,我们常常需要使用一些工具帮助我们快速搭建网页,比如一些 CSS 框架、图表库等等。这些工具都需要用到一些依赖,我们需要使用 npm 包管理器来安装这些依赖包。

    2 年前
  • npm 包 poly-count 使用教程

    1. 什么是 poly-count poly-count 是一个可以计算三角形及其面积的 npm 包。它可以对 3D 模型的三角形进行遍历,并计算出模型的顶点和面的数量,以及每个三角形的面积。

    2 年前
  • npm 包 mongoose-plugin-tags2 使用教程

    在前端开发中,许多项目需要使用数据库来存储数据。而 MongoDB 是一种非常流行的 NoSQL 数据库。Mongoose 是一个能够在 Node.js 中使用 MongoDB 的库。

    2 年前
  • npm 包 the-best-winston-sentry 使用教程

    在前端开发中,日志模块是一个不可或缺的组件,它有助于开发人员快速定位和解决应用程序中的问题。近年来,Winston 是一个备受青睐的日志框架,它支持多种日志传输方式。

    2 年前
  • npm 包 aweb-examen-01-rojas-danilo 使用教程

    介绍 npm 是一个非常流行的 JavaScript 包管理工具,它允许前端开发人员轻松地共享、维护和更新他们的代码。awe-examen-01-rojas-danilo 是一个非常实用的 npm 包...

    2 年前
  • NPM 包 node-red-contrib-flatten 使用教程

    在前端开发中,我们经常需要对多层嵌套的数据结构进行处理和展开。node-red-contrib-flatten 是一个 NPM 包,可以帮助我们方便地将嵌套的数据结构展开成一维的数组。

    2 年前
  • npm 包 Color-Lerp-Web 使用教程

    介绍 Color-Lerp-Web 是一个基于 JavaScript 的 npm 包,用于生成两种颜色之间的平滑过渡色。该包能够处理多种颜色格式,例如 RGB, HSL 和 HEX。

    2 年前
  • npm 包 generator-node-bandwidth 使用教程

    介绍 generator-node-bandwidth 是一个帮助开发者快速生成 Node.js 应用的 generator,它提供了通讯服务 Bandwidth 的基础应用骨架。

    2 年前
  • 使用 npm 包 htmltag-react

    在前端开发中,我们经常需要手写 HTML 标签和属性,这可能会导致拼写错误和代码冗余。但是,通过使用 npm 包 htmltag-react,我们可以避免这些问题。

    2 年前
  • npm 包 koa-generic-session-file2 使用教程

    前言 随着互联网时代的到来,前端开发变得越来越重要。而在前端开发中,npm 包已经成为了不可或缺的一部分。本文主要介绍一个使用 npm 包 koa-generic-session-file2 的教程,...

    2 年前

相关推荐

    暂无文章