npm 包 ehd 使用教程

简介

ehd 是一个基于 Vue 和 Element UI 的前端 UI 库。它提供了一些常用的 UI 组件和实用工具函数,帮助开发者快速搭建出美观大方的网站。

安装

使用 npm 安装:

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

快速上手

注册组件

在 Vue 中使用 ehd 组件前,需要先将其注册到 Vue 中。可以通过以下方式:

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

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

或者按需引用:

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

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

使用组件

注册后,在 Vue 组件中即可通过标签名的方式使用 ehd 组件。

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

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

引用样式

ehd 组件的样式是基于 Element UI 的样式扩展而来的。因此,在使用 ehd 组件前需要先引用 Element UI 的 CSS 文件。

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

另外,还需要在项目中引入 ehd 的 CSS 文件。

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

更多示例

更多组件使用示例可以参考 ehd 的官方文档

意义与指导

使用 ehd 可以大大提高前端开发效率,减少样式和组件开发的重复劳动,并且可以保证开发出的网站UI风格的一致性。同时,ehd 也是一个开源项目,如果你对某个组件的实现方式不满意,可以自己修改源代码,并向项目提交 PR,一起让 ehd 变得更加优秀。

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


猜你喜欢

  • npm 包 winreg-silent 使用教程

    前言 随着前端技术不断发展,前端也不再仅仅是浏览器中的简单页面了。前端工程师的工作范围不断扩大,而其中的一个重要部分就是与本地机器相关的操作。在这个过程中,我们可能需要使用到一些系统级别的 API,例...

    3 年前
  • npm 包 tkl 使用教程

    简介 tkl 是一个基于 Vue 技术栈的组件库,提供了诸如按钮、布局、表格、表单等常见组件,同时也可以方便地自定义主题和样式。 作为前端开发者,我们经常需要使用各种组件库来简化开发,tkl 提供了这...

    3 年前
  • npm 包 record-audio-js 使用教程

    npm 包 record-audio-js 使用教程 record-audio-js 是一款前端录音的 npm 包,它使用 Web API 的 MediaRecorder 接口,支持录制并保存 Web...

    3 年前
  • npm 包 `node-stationery` 使用教程

    本文将介绍如何使用 node-stationery,以及它带来的便利性和使用指导建议。 什么是 node-stationery node-stationery 是一个开源的前端工具集,旨在提高前端...

    3 年前
  • npm 包 objectnotnull 使用教程

    在前端开发中,处理对象类型的数据是非常常见的任务。但是,在某些情况下,对象可能不存在或为 null 或 undefined,这可能导致应用程序的崩溃。为了避免这种情况,可以使用 objectnotnu...

    3 年前
  • npm包rlx-js使用教程

    什么是rlx-js rlx-js是一个基于JavaScript的库,用于处理循环引用的问题。循环引用是指两个或多个对象相互引用,导致内存泄漏或报错。rlx-js通过简单的方法,解决了这一问题。

    3 年前
  • npm 包 rycou-test 使用教程

    前言 在前端领域中,我们经常会使用一些 npm 包来完成各种功能,提高开发效率。今天我要介绍的是 rycou-test 这个 npm 包,该包可以用于前端单元测试,并且具有非常简单易用的接口。

    3 年前
  • npm 包 auto-styles-loader 使用教程

    在前端开发中,样式文件的加载是一个常见的问题。当我们在使用 CSS 或者 LESS 等样式预处理器时,我们通常需要手动将样式文件引入到 HTML 或者 JS 文件中。这个过程比较繁琐,而且容易出错。

    3 年前
  • npm 包 jquery-fieldselection 使用教程

    在前端开发中,经常会涉及到文本选区的操作。jQuery 是一个流行的 JavaScript 库,用于简化 DOM 操作,其中也有一个名为 jquery-fieldselection 的 npm 包,可...

    3 年前
  • npm 包 mn-accordion 使用教程

    简介 mn-accordion 是一个基于 JavaScript 和 CSS 的前端组件库,旨在提供一种简单而灵活的方式来为网页创建折叠面板。 安装 mn-accordion 可以通过 npm 包管理...

    3 年前
  • npm 包 upcn-header-lib 使用教程

    简介 upcn-header-lib 是基于 Vue.js 的一个组件库,主要用于创建适用于 UPcN 系统头部导航的 UI 组件。此库提供了诸如导航菜单、通知中心、用户信息等功能,使得程序员们能够快...

    3 年前
  • npm 包 webpack-assembler 使用教程

    引言 在前端开发中,我们常常需要将多个 JavaScript 模块打包成一个或多个文件,以便于浏览器加载。而 webpack 是目前最流行的打包工具之一。虽然 webpack 在某些方面用起来十分方便...

    3 年前
  • npm 包 @mattlewis92/ngx-chips 使用教程

    近年来,前端开发的快速发展受到越来越多开发者的关注。前端技术越来越成熟,越来越多的前端库和工具得到了广泛的应用。本文将介绍一个前端常用工具 @mattlewis92/ngx-chips,并详细说明在实...

    3 年前
  • npm 包 basket-store-test-2 使用教程

    简介 Basket-store-test-2 是一个用于前端开发的 npm 包,它提供了一个轻量级的本地存储方案。事实上,这个存储方案是一个受到 basket.js 启发的解决方案,它提供了类似于 s...

    3 年前
  • NPM 包 Dengcathy 使用教程

    在前端开发中,使用 NPM 包可以极大地提高开发效率和代码质量,而 Dengcathy 是一款非常实用的 NPM 包,它能够快速地生成表格和图表,本文将介绍如何使用 Dengcathy 包并提供详细的...

    3 年前
  • npm包 redux-blabber 使用教程

    简介 在前端开发中,使用Redux管理应用程序状态已经成为了主流的方式。Redux库提供了一系列的API来方便地管理状态,但在开发过程中也存在一些问题,例如难以快速检查状态的改变、无法轻松地查看状态的...

    3 年前
  • NPM 包 webpack-assembler-react 使用教程

    介绍 webpack-assembler-react 是一个能够自动生成 webpack 配置文件的 npm 包。它基于 eslint-config-airbnb 和 babel-preset-rea...

    3 年前
  • npm 包 intl-tel-input-boegebjerg 使用教程

    在前端开发过程中,我们通常需要处理各种输入框,其中包括手机号码输入框。 然而,由于全球不同国家和地区的电话号码命名规则不同,处理这些输入框可能会变得困难和繁琐。为了解决这个问题,我们可以使用 intl...

    3 年前
  • npm 包 sonus-api-caller 使用教程

    Sonus-api-caller 是一款基于 Node.js 的语音识别 JavaScript 库,它可轻松实现对语音进行处理,并对输入的文本进行转换操作。 本文将介绍如何在你的前端项目中使用 son...

    3 年前
  • npm 包 redux-baobab 使用教程

    什么是 redux-baobab? Baobab 是一种 JavaScript 状态管理库,redux-baobab 是基于 Baobab 的 Redux 状态管理库,用于构建可扩展的、可靠的和易于维...

    3 年前

相关推荐

    暂无文章