Justice 是一个基于 Vue.js 和 Element UI 的可定制化的后台管理界面。借助它，前端开发人员可以快速开发符合自己项目需求的后台管理页面。本文将详细介绍 Justice 的使用方法和注意事项。
安装
可以使用 npm 安装 Justice：
npm install @gridsome/admin
或者，也可以使用 yarn：
yarn add @gridsome/admin
引入 Justice
在使用 Justice 之前，需要在 Vue.js 中引入它。在 Vue.js 的入口文件中，以以下方式引入：
import Vue from 'vue' import Justice from '@gridsome/admin' Vue.use(Justice)
使用
在 Vue.js 组件中使用 Justice 的方式非常简单，只需要在模板中加入 Justice 组件即可：
<Justice />
Justice 组件可以接收多个参数，具体的参数及其意义可以查看 Justice 的文档。在这里介绍一个使用最多的参数：
config：配置文件。menu：左侧菜单列表。header：头部信息。
下面给出一个完整的 Justice 组件使用示例：
-- -------------------- ---- -------
----------
--------
----------------
------------
----------------
--
-----------
--------
------ ------- -
------ -
------ -
------- -
----- -------------------
------ --------
------------- -------
--
----- -
-
------ ------------
----- -----------------
----- -------------
--------- -
-
------ -------
----- -------
--
-
------ -----------
----- -----------
-
-
-
--
------- -
------- ---------------------
--------- ----- ----
-
-
-
-
---------注意事项
1. 可以自定义主题
Justice 使用了 Element UI 的样式，因此，可以使用 Element UI 自带的主题，或者自定义各种样式。可以连接到 Element UI 的官网查看官方主题库，或者在 Element UI 中自定义样式。
2. Justice 中所有配置都可以通过函数动态设置
Justice 中所有传递参数的地方都可以使用函数动态获取数据。因此，我们可以动态的生成左侧菜单栏、头部信息等。
3. Justice 中 Icon 的引入
Justice 使用了 Element UI 中的 Icon，引入 Icon 有两种方式：
- 使用 Element UI 自带的图标。
- 使用第三方 iconfont 的图标。
使用 Element UI 自带的图标十分简单，在菜单中的 icon 属性添加 Element UI 图标的类名即可，例如 el-icon-xxx。
使用第三方 iconfont 的图标，可以在 index.html 中的 head 标签内添加如下内容：
<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxxxxx.css">
其中 xxxxxxxx 为 iconfont 的项目 ID。然后，就可以在菜单中的 icon 属性添加自定义图标的类名。
结语
Justice 是一个优秀的管理后台模板和组件库，可以快速帮助前端开发者搭建出符合自己项目需求的后台管理页面。在使用 Justice 的过程中，需要注意 Justice 中所有配置项都支持函数动态设置；Justice 中的 Icon 可以使用 Element UI 自带的图标或者第三方 iconfont 的自定义图标。希望能够帮助到前端开发者使用 Justice 更加得心应手！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d8698