快速打造个性化的Element Plus后台管理界面（1）

Element UI看腻了怎么办？

开发了N个后台系统，都长得差不多，审美疲劳吗？

UI同事的设计稿，如何快速还原前端页面，难道要写9000行CSS把颜色一个个改了？

写了十几篇关于Vue3+Element Plus搭建后台管理系统的技术文章后，打算换换脑子，做一些有趣的尝试——让项目更好看些。

在mocha-vue-system的基础上，精简出一个新项目：Pretty Vue3，用来尝试快速切换各种UI风格。

Element Plus的原始风格，简单清爽。

半成品预览

CSS/SCSS写了不到50行，效果还是有一点。

Start

今天的皮肤取名 elegant blue

原本的代码在样式管理上还有些缺陷，所以一边coding，一边修改代码结构。把之前放在layout各个布局组件的样式统一取出来，放在layout.scss中。

logo本来放在头部组件header中，为了获得更加灵活的布局，把logo放在外面。

修改主题CSS

打造新的UI界面，一是修改布局，二是调整配色和细节。在我们保持html基本不变的情况下，绝大部分的工作都交给了CSS。本次主题主要涉及下面3个样式表：

• assets/css/layout.scss 布局样式
• assets/css/elegantBlue.scss 主题的CSS Vars，部分覆盖Element Plus组件样式
• assets/css/element/index.scss 通过 SCSS 变量修改Element Plus的主题

而大部分样式书写工作，都是基于EP自定义主题的两种方式。

Element Plus 自定义主题

Element Plus提供了两种修改主题的方式：

1. 通过 SCSS 变量
2. 通过 CSS 变量设置

官方文档说得比较详细。我们可以选择用其中一种方式来定义新的主题，如果修改的细节不多，用SCSS变量修改更方便。

在本次开发过程中，我同时使用了2种方式。有一些SCSS变量具有关联关系，比如menu的样式，如果只想修改menu的背景色、文本颜色，但不想影响其它变量，直接在CSS变量中修改更合适。

找到对应的CSS Vars

修改主题就是在不断寻找CSS变量，然后修改它的过程（需要注意对其他变量的影响），需要一点耐心。

通过F12控制台-计算样式寻找html元素具体使用的CSS Vars，这样比较好找。找到之后，就可以修改CSS变量值。

初步成果

实践证明，实际操作比开始设想的麻烦一些，预估时间又出错了。本来以为半天搞完的，结果搞了一天也只是个半成品。

模板代码稍微改了一些，主要调整都在样式文件。

element/index.scss

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #2f408a
    ),
    'success': (
      'base': #2ba471
    ),
    'danger': (
      'base': #fa2256
    )
  ),
  $text-color: (
    'primary': #2f408a,
    // 'regular': #9aa2c6,
    'secondary': #9da5c8
  ),
  $menu: (
    ('item-height': 50px)
  ),
  $bg-color: (
    'page': #f5f7fc
  ),
  $box-shadow: (
    'light': 0px 0px 20px rgba(15, 51, 122, 0.12)
  )
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use 'element-plus/theme-chalk/src/index.scss' as *;

elegant.scss

:root {
  --el-menu-bg-color: #0f337a;
  --el-menu-text-color: #d2d9e6;
  --el-menu-hover-bg-color: var(--el-color-primary);
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  color: #fff;
}

#app {
  color: var(--el-text-color-primary);
  .el-card {
    --el-card-border-radius: 20px;
    border-radius: var(--el-card-border-radius);
    border: 0 none;
  }
}

阶段性总结

比较花时间的不是coding，而是coding之外的东西。

1. 因为没有UI设计稿，直接在dribbble找了一个喜欢的设计，参考其主要颜色和风格直接写代码，所以脑子里还要构思页面元素要怎么设计能出效果，反复调整很多次。 多次教训证明，先出UI，再写代码这样的步骤是合理的，以后还是应该先出UI设计规范。
2. 对于Element Plus的CSS Vars不熟悉，找变量也花了一些时间，而且有时候改了一个变量影响到了别的组件样式，修改须谨慎。
3. 暗黑模式的功能保留下来，但是没有写适配暗黑模式的样式。

无论怎样，试验性的尝试都是值得的，要不怎么进步呢！

我还打算好几个风格呢，加油！⛽️

项目地址

半成品git仓库地址：github.com/lucidity99/…