前言
vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板，从2016年年底第一个commit，到现在差不多两年了，GitHub上也有了 5k star，也是这些让我有了持续更新的动力，其中也踩了很多坑，在这总结一下。
github地址：vue-manage-system
线上地址：blog.gdfengshuo.com/example/work/
自定义图标
element-ui 自带的字体图标比较少，而且许多比较常见的都没有，因此需要自己引入自己想要的字体图标。最受欢迎的图标库 Font Awesome，足足有 675 个图标，但也因此导致字体文件比较大，而项目中又不需要用到这么多图标。那么这时候，阿里图标库就是一个非常不错的选择。
首先在阿里图标上创建一个项目，设置图标前缀，比如 el-icon-lx，设置Font Family，比如 lx-iconfont，添加需要用到的图标到项目中，我这边选择 Font class 生成在线链接，因为所有页面都需要用到图标，就直接在 index.html 中引入该css链接就行了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-manage-system</title> <!-- 这里引入阿里图标样式 --> <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> </head> <body> <div id="app"></div> </body> </html>然后需要设置前缀为 el-icon-lx 的图标类名使用 lx-iconfont 字体。
[class*="el-icon-lx"], [class^=el-icon-lx] { font-family: lx-iconfont!important; }但是这个样式要放在哪里才可以呢？这可不是随便放就行的。在 main.js 中，引入了 element-ui 的样式，而样式中有这样的一段css:
[class*=" el-icon-"], [class^=el-icon-]{ font-family: element-icons!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }很明显，如果这段 css 在我们自定义样式后面才执行，就会覆盖了我们的样式，那自定义的图标就显示不了。而在 build 项目的时候，会把 APP.vue 中的的样式打包进 app.css 中，然后再把 main.js 中引用到的样式追加到后面。那么我们可以把自定义样式放到一个css文件中，然后在 main.js 引入 element-ui css 的后面引入，那就可以覆盖掉默认字体了，然后便可以在项目中通过 <i class="el-icon-lx-people"></i>使用图标了。
那机智的人就发现了，我自定义图标的前缀不要含 el-icon- 就不会有这样的问题了。是的，那么为了和原有字体保持一样的样式，需要复制它的整段css
/* 假设前缀为 el-lx */ [class*="el-lx-"], [class^=el-lx-]{ font-family: lx-iconfont!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; vertical-align: baseline;
