npm 包 vue2-adminlte 使用教程

简介

vue2-adminlte 是一个基于 Vue.js 和 AdminLTE 3 构建的后台管理系统框架，提供了一套现成的 UI 模板，可以快速搭建企业级后台管理系统。

安装使用

安装

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

引入

经过安装后，在项目代码中可以通过 import 或者 require 的方式引入 vue2-adminlte 模块。

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

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

使用

在 Vue 组件中可以通过以下方式使用 vue2-adminlte

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

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

组件列表

vue2-adminlte 提供了许多预制的 UI 组件，包括以下几类：

布局组件

  • <lte-main-header> 主页头部
  • <lte-main-sidebar> 主页侧边栏
  • <lte-main-footer> 主页底部

导航/菜单组件

  • <lte-nav-item> 导航 / 菜单项
  • <lte-nav-tree> 导航 / 菜单树

表单组件

  • <lte-form-group> 表单组
  • <lte-input> 文本输入框
  • <lte-datepicker> 日期选择器
  • <lte-select> 下拉框

按钮/图标组件

  • <lte-link-button> 普通按钮
  • <lte-success-button> 成功按钮
  • <lte-error-button> 错误按钮
  • <lte-warning-button> 警告按钮
  • <lte-info-button> 信息按钮
  • <lte-primary-button> 主要按钮
  • <lte-secondary-button> 次要按钮
  • <lte-link> 链接
  • <lte-icon> 图标

示例代码

以下为一个基础的后台管理系统页面示例代码：

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

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

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

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

结论

通过 vue2-adminlte 这个 npm 包，我们可以快速搭建一个简洁大方的后台管理系统，省去了重复的代码编写和组件构造时间，只需要按照 API 文档即可完成开发。非常适合企业级应用的快速迭代和部署。

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

阅读全文

猜你喜欢

  • npm 包 cordova-plugin-imkit 使用教程

    近年来，移动应用程序发展迅速，越来越多的开发者选择使用 Cordova 开发跨平台的 APP。而 Cordova-plugin-imkit 就是一个非常实用的插件，它提供了在 APP 内实现即时通讯的...

    3 年前
  • npm 包 ffmpeg-peaks 使用教程

    前言 在前端开发中，我们常常需要处理音视频文件，而音频波形图展示是其中重要的一环。本文将介绍一个 npm 包 ffmpeg-peaks，它可以生成音频波形图用于展示，更加丰富和美观展现音频文件。

    3 年前
  • npm 包 hubot-mercadolibre_cl 使用教程

    介绍 hubot-mercadolibre_cl 是一个基于 Hubot 的 npm 包，用于查询和展示用户在 Chile 的 Mercado Libre 上的商品信息和价格。

    3 年前
  • npm 包 best-candidate 使用教程

    介绍 在前端开发中，我们经常会遇到需要从一组数据中选取最佳的候选项的情况。通常我们需要写一些复杂的算法来完成这个任务，但是现在我们可以使用一个方便快捷的 npm 包：best-candidate。

    3 年前
  • npm 包 bluestoneapp-ngx-pagination 使用教程

    在现代 Web 应用程序开发中，分页是非常重要的功能之一。由于 Angular 是一个流行的前端框架，因此有许多与分页相关的 npm 包可供使用。 在本教程中，我们将介绍一个名为 bluestonea...

    3 年前
  • npm 包 eslint-config-gpsit-react 使用教程

    npm 包 eslint-config-gpsit-react 使用教程 介绍 npm 是一个使用非常方便的 JavaScript 包管理器，其中包括了大量的前端常用工具。

    3 年前
  • npm 包 stratic-indexes-to-rss 使用教程

    前言 随着前后端分离架构的流行，前端涉及的技术也越来越多，其中之一就是生成静态网站。静态网站生成器 Jekyll、Hexo 等相继出现，让生成静态网站变得易如反掌。

    3 年前
  • npm 包 math-array 使用教程

    在前端开发中，经常会需要进行数字运算。这时我们就需要用到一些数学库，而 npm 上的 math-array 包就是一个非常不错的选择。本文将介绍 math-array 包的使用方法，帮助你更好地进行前...

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

    今天，我想给大家介绍一个前端的 npm 包 test-ngx-toastr，它是一个非常实用的消息提示框组件，适用于 Angular 框架开发。本文将向大家详细讲解如何安装和使用该组件，以及一些常见问...

    3 年前
  • npm 包 hexo-theme-mip 使用教程

    Hexo 是一个快速、简洁且高效的静态博客框架，可以非常方便地生成静态网页，而且还支持大量主题。其中 hexo-theme-mip 是一个专门为移动设备优化的主题，配合外部的 mip html，可以进...

    3 年前
  • npm 包 insight-lite-ui 使用教程

    介绍 insight-lite-ui 是一款基于 Vue.js 开发的 UI 组件库。它提供了一系列易于使用的组件，帮助开发者快速构建美观、交互性强的 Web 应用界面。

    3 年前
  • npm 包 react-device-battery 使用教程

    当我们在开发前端网页或者 PWA 应用时，需要获取用户设备的电量信息。这时，我们可以使用 npm 包 react-device-battery。本文将详细介绍如何使用 react-device-bat...

    3 年前
  • npm 包 lesx-dsl-to-jsx 使用教程

    在前端开发中，我们经常会使用 DSL（Domain-Specific Language，领域特定语言）来描述应用程序中的数据和交互。尤其在 React Native 开发中，使用 DSL 技术能够更好...

    3 年前
  • npm 包 data-resolver 使用教程

    当我们在开发过程中需要处理异步数据时，可能会遇到一些问题，例如需要等待多个异步数据源返回结果后再进行下一步操作，或者需要对多个异步数据进行处理等。在这种情况下，我们可以使用 npm 包 data-re...

    3 年前
  • npm 包 handlebars-live-templates-idom 使用教程

    在前端开发中，我们经常需要使用模板引擎来动态生成 HTML 页面，而 Handlebars 是目前使用最广泛的一种模板引擎。而 handlebars-live-templates-idom 这个 np...

    3 年前
  • npm 包 starter-cli 使用教程

    在前端开发中，经常需要使用一些常见的工具、插件和框架，如何实现快速和方便的引用这些资源呢？这就需要用到 npm 包了。npm 是 Node.js 的包管理器，它拥有成千上万的开源包可以供我们引用使用。

    3 年前
  • npm 包 lesx-jsx 使用教程

    在前端开发中，我们经常需要使用到 JSX 语法，它可以让我们以一种更直观的方式编写组件，提高开发效率。然而，有时候我们需要在不支持 JSX 语法的环境下使用它，这时就需要使用 npm 包 lesx-j...

    3 年前
  • npm 包 vuex-async-actions 使用教程

    在 Vue.js 的项目中，我们经常需要使用 Vuex 这个状态管理插件来管理应用程序的状态。随着应用程序的复杂度增加，我们可能需要完成一些异步操作来获取数据，这时候就需要使用 Vuex-async-...

    3 年前
  • npm 包 Restal 使用教程

    在前端开发中，经常需要调用不同的 API，这时候使用 Restal 工具可以让 API 交互变得更加简单。Restal 是一个基于 Promise 的 API 客户端，它的功能非常全面，支持常见的 R...

    3 年前
  • npm 包 ymlib 使用教程

    前言 ymlib 是一款基于 yaml 格式的编程语言 YAML 的解析库，用于将 YAML 文本转换为 JavaScript 对象。本文将介绍如何在前端项目中使用该库，包括安装，使用方法和示例代码。

    3 年前

相关推荐

    暂无文章