Element Plus 组件库使用指南

柚ONE

于 2025-07-01 09:49:21 发布

阅读量695

点赞数 26

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/LaQiiiii/article/details/149039836

概述

Element Plus 是一套基于 Vue 3 的桌面端组件库，是 Element UI 的 Vue 3 版本。它提供了丰富的组件和工具，帮助开发者快速构建企业级中后台产品。

核心特性

Vue 3 支持：完全兼容 Vue 3 的 Composition API
TypeScript 支持：所有组件都用 TypeScript 编写，提供完整的类型定义
主题定制：支持通过 SCSS 变量轻松定制主题
国际化：内置多语言支持
响应式设计：适配不同屏幕尺寸
丰富的组件：提供 50+ 高质量组件

常用组件分类

基础组件

Button 按钮
Layout 布局
Container 布局容器
Icon 图标
Link 链接

表单组件

Form 表单
Input 输入框
Radio 单选框
Checkbox 多选框
Select 选择器
Switch 开关
DatePicker 日期选择器
Upload 上传
Rate 评分
Slider 滑块

数据展示

Table 表格
Tag 标签
Progress 进度条
Tree 树形控件
Pagination 分页
Badge 标记
Avatar 头像

通知反馈

Alert 提示
Loading 加载
Message 消息提示
Notification 通知
Dialog 对话框
Drawer 抽屉
Tooltip 文字提示
Popover 弹出框

导航组件

Menu 菜单
Tabs 标签页
Breadcrumb 面包屑
Dropdown 下拉菜单
Steps 步骤条

其他

Divider 分割线
Timeline 时间线
Calendar 日历
Image 图片
Backtop 回到顶部

安装与使用

安装

npm install element-plus
# 或
yarn add element-plus

完整引入

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

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入

推荐使用 unplugin-element-plus 或 unplugin-vue-components 进行按需导入

主题定制

通过 SCSS 变量覆盖

// styles/element/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": #9900ff,
    ),
  ),
);

在 vite.config.js 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    ElementPlus({
      useSource: true,
    }),
  ],
})

国际化

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})