简介
vue2-adminlte 是一个基于 Vue.js 和 AdminLTE 3 构建的后台管理系统框架，提供了一套现成的 UI 模板，可以快速搭建企业级后台管理系统。
安装使用
安装
npm install vue2-adminlte
引入
经过安装后，在项目代码中可以通过 import 或者 require 的方式引入 vue2-adminlte 模块。
import Vue from 'vue' import Vue2AdminLTE from 'vue2-adminlte' Vue.use(Vue2AdminLTE)
使用
在 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