vue管理系统后台管理系统开发综述

系统架构设计


浏览:904 次

前言

Vue管理系统,一个基于Vue的系统。自从2016年底首次提交js和元素ui的后台管理系统模板以来,已经有三年了,GitHub上也有8.3k颗星,这给了我不断更新的动力。我也踩过很多陷阱。让我总结一下。

Github地址:

在线地址:

形象

形象

形象

自定义图标

元素ui中的字体图标很少,许多更常见的字体图标都没有,因此您需要介绍您想要的字体图标。最流行的图标库Font Awesome有675个图标。然而,字体文件相对较大,项目不需要使用这么多图标。此时,阿里巴巴图标库是一个非常好的选择。

首先,在Ali图标上创建一个项目,设置图标前缀,如el-icon-lx,并设置字体系列,如lx-iconfont。将图标添加到项目。我选择Font类来生成在线链接,因为所有页面都需要图标,所以它直接在索引中

<头部>

<元字符集=“utf-8”>

vue管理系统

<;/div>

然后,您需要设置以el icon lx为前缀的图标类名,以使用lx iconfont字体。

[class*=“el icon lx”],[class^=el icon lx]{

font-family:lx图标信息!重要的

}

但是我可以把这种风格放在哪里呢?这不是随便说的。在main In js中,引入了元素ui样式,样式中有这样一部分css:

[class*=“el icon-”],[class^=el icon-]{

font-family:元素图标!重要的

发言:无;

字体样式:普通;

字体粗细:400;

字体变体:正常;

文本转换:无;

线高:1;

垂直对齐:基线;

显示:内嵌块;

-webkit字体平滑:抗锯齿;

-moz-osx字体平滑:灰度;

}

显然,如果CSS在我们的自定义样式之后执行,它将覆盖我们的样式,并且不会显示自定义图标。在构建项目中,将vue中的APP样式打包到APP Css中,然后放入main。js中引用的样式将附加到末尾。然后,我们可以将自定义样式放入css文件中,然后单击元素ui css之后引入的main Js,它可以覆盖默认字体,然后您可以使用<;/i> 使用图标。

机智的人发现我的自定义图标的前缀不包含el图标-不会有这样的问题。是的,为了保持与原始字体相同的样式,您需要复制其整个css

/*假设前缀是el-lx*/

[class*=“el lx-”],[class^=el lx-]{

font-family:lx图标信息!重要的

发言:无;

字体样式:普通;

字体粗细:400;

字体变体:正常;

文本转换:无;

线高:1;

垂直对齐:基线;

显示:内嵌块;

-webkit字体平滑:抗锯齿;

-moz-osx字体平滑:灰度;

}

导航菜单

元素ui导航菜单文档也非常详细,但仍有人问我问题或QQ:如何处理三级菜单等。特定菜单项可能是服务器根据权限返回的特定数据项,因此无法写入模板中。

首先,确定菜单数据的格式如下。即使服务器返回的格式不同,前端也需要将其处理为以下格式:

导出默认值{

数据(){

返回{

项目:[{

icon:'el icon lx home',

index:'仪表板',

标题:“系统主页”

},{

icon:'el icon lx日历',

索引:“1”,

title:'表单相关',

接头:[{

索引:“1-1”,

标题:“三级菜单”,

接头:[{

index:'编辑器',

标题:“富文本编辑器”

}]

}]

},{

icon:'el icon lx warn',

索引:“2”,

标题:“错误处理”,

接头:[{

索引:“404”,

标题:“404页”

}]

}