修改 主题颜色 【vue-elementui-admin 框架】

前情提要

框架库：https://github.com/PanJiaChen/vue-admin-template/tree/permission-control

由于最近项目需求，接触了 这个 vue admin 管理后台的前端框架，其中不乏一些具有挑战[对我来说，没有碰过]，比如动态路由配置、iframe 切换和保持、tagsView 的引入，不过在不断的努力之后，只要好好理理逻辑，上手还是很快的，其中最麻烦的是 动态路由配置，需要根据后端数据编码生成 path 来设定 路由， 当然回归本节，比较简单。

步骤如下

• 安装 element-theme, element-theme-chalk (可以先进行下一步，如果不行再安装)
  npm i element-theme -g
npm i element-theme-chalk -g

  但是后来，发现，在 main.js 中早就有 相关的引入，也不需要安装，可以先不安装进行下步试试

• 在 @/styles 路径下面 新建文件 element-variables.scss, 配置如下：

  /* 改变主题色变量 */
  $--color-primary: #009688;
  /* 改变 icon 字体路径变量，必需 */
  $--font-path: '~element-ui/lib/theme-chalk/fonts';
  @import "~element-ui/packages/theme-chalk/src/index";

• 在 main.js 中引入即可

  import '@/styles/element-variables.scss'

赏

谢谢你请我吃糖果

支付宝

微信