Element Plus 组件库架构与主题定制实战

Posted on In

Element Plus 组件库架构与主题定制实战

Hey，小伙伴们！今天来聊聊 Element Plus，一个基于 Vue 3 的强大组件库，不仅能快速搭建后台管理页面，还支持深度定制。接下来，我将带大家快速上手，并深入探索如何自定义主题。

初步配置：快速上手

安装依赖

确保项目基于 Vue 3，然后安装 Element Plus 和 Element Plus Icons：

1
npm install element-plus @element-plus/icons-vue

或者

1
yarn add element-plus @element-plus/icons-vue

全局引入

在项目入口文件 main.js 或 main.ts 中全局引入 Element Plus：

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

这种方式适合快速搭建项目，但可能会导致打包体积较大。接下来，我们来看看如何优化。

进阶操作：按需引入

按需引入可以显著减少最终打包体积，提升加载速度。

安装插件

安装 unplugin-vue-components 和 unplugin-auto-import 插件：

1
npm install unplugin-vue-components unplugin-auto-import --save-dev

或者

1
yarn add unplugin-vue-components unplugin-auto-import --dev

配置插件

在构建配置文件中（如 vite.config.js 或 webpack.config.js）配置插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

这样，组件会自动按需加载，无需手动导入。

高级定制：自定义主题

Element Plus 提供了强大的 SCSS 变量覆盖功能，可以轻松定制主题。

创建 SCSS 文件

在项目资源文件夹下的 scss 子目录中，创建 custom-theme.scss 文件。路径通常是 src/assets/scss/。

覆盖默认主题变量

在 custom-theme.scss 文件中，使用 @forward 指令覆盖默认主题变量：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@forward "element-plus/theme-chalk/src/common/var.scss" with (  
  $colors: (  
    "primary": (  
      "base": #2c82ff,  
    ),  
    "success": (  
      "base": #00d68f,  
    ),  
    "warning": (  
      "base": #ffaa00,  
    ),  
    "danger": (  
      "base": #ff4961,  
    ),  
    "info": (  
      "base": #9915c2,  
    ),  
  )
);

@import "element-plus/theme-chalk/src/index.scss";

引入自定义主题

在项目入口文件中引入自定义主题文件：

1
import './assets/scss/custom-theme.scss';

这样，项目中的 Element Plus 组件就会应用你自定义的主题。

实战应用：打造后台管理页面

有了前面的配置基础，接下来我们来实战应用一下，构建一个简单的后台管理页面。

页面布局

使用 Element Plus 的布局组件搭建页面：

1
2
3
4
5
6
7
8
9
<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

菜单导航

在 el-aside 中添加 el-menu 组件：

1
2
3
4
5
6
7
8
<el-menu default-active="2" class="el-menu-vertical-demo">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-sub-menu index="2">
    <template #title>我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
  </el-sub-menu>
</el-menu>

数据展示

在 el-main 中使用 el-table 和 el-pagination 展示数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="150"></el-table-column>
  <el-table-column prop="name" label="姓名" width="200"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400"
></el-pagination>

通过这些组件的组合，可以快速构建出一个功能完善的后台管理页面。