Element UI的el-menu样式太丑？手把手教你定制一套专属后台侧边栏（Vue 3 + Vite）

每次打开后台管理系统，那个千篇一律的Element UI菜单是不是让你审美疲劳？作为开发者，我们完全有能力打造一套既符合品牌调性又具备独特交互体验的侧边栏导航。本文将带你从视觉设计到代码实现，用Vue 3和Vite构建一个令人眼前一亮的定制化菜单系统。

1. 环境准备与基础配置

工欲善其事，必先利其器。在开始前，确保你的项目已经配置好以下环境：

bash复制# 创建Vite项目（如果尚未创建）
npm create vite@latest my-admin --template vue-ts

# 安装Element Plus
npm install element-plus @element-plus/icons-vue

接着在main.ts中引入基础样式：

typescript复制import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

提示：使用Vite的CSS预处理器支持可以让我们后续的样式定制更加便捷，建议安装sass：

bash复制npm install -D sass

2. 深度样式定制技巧

2.1 SCSS变量覆盖方案

Element Plus使用SCSS编写样式，这为我们提供了绝佳的定制入口。创建src/styles/element-variables.scss文件：

scss复制// 覆盖主色系
$--color-primary: #6a11cb;
$--color-success: #00b09b;
$--color-warning: #f46b45;

// 菜单专用变量
$--menu-item-hover-fill: rgba(106, 17, 203, 0.1);
$--menu-item-active-fill: rgba(106, 17, 203, 0.2);
$--menu-text-color: #2c3e50;
$--menu-active-color: $--color-primary;

// 引入Element默认变量
@use "element-plus/theme-chalk/src/index" as *;

在vite.config.ts中配置全局SCSS变量：

typescript复制export default defineConfig({
  css: {