设计原则与基础概念

Element Plus 设计原则

一致性 (Consistency)

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等

反馈 (Feedback)

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态

效率 (Efficiency)

简化流程：设计简洁直观的操作流程

清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策

帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担

可控性 (Controllability)

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策

结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等

Element Plus 组件体系概览

Element Plus 提供了丰富的组件库，按功能分为以下几个主要类别：

Basic 基础组件 (12个)

Button 按钮
Border 边框
Color 色彩
Container 布局容器
Icon 图标
Layout 布局
Link 链接
Text 文本
Scrollbar 滚动条
Space 间距
Splitter 分隔面板
Typography 排版

配置组件 (1个)

Config Provider 全局配置

Form 表单组件 (22个)

Autocomplete 自动补全输入框
Cascader 级联选择器
Checkbox 多选框
Color Picker 取色器
Date Picker 日期选择器
DateTime Picker 日期时间选择器
Form 表单
Input 输入框
Input Number 数字输入框
Input Tag 标签输入框
Mention 提及
Radio 单选框
Rate 评分
Select 选择器
Virtualized Select 虚拟化选择器
Slider 滑块
Switch 开关
Time Picker 时间选择器
Time Select 时间选择
Transfer 穿梭框
TreeSelect 树形选择
Upload 上传

Data 数据展示 (23个)

Avatar 头像
Badge 徽章
Calendar 日历
Card 卡片
Carousel 走马灯
Collapse 折叠面板
Descriptions 描述列表
Empty 空状态
Image 图片
Infinite Scroll 无限滚动
Pagination 分页
Progress 进度条
Result 结果
Skeleton 骨架屏
Table 表格
Virtualized Table 虚拟化表格
Tag 标签
Timeline 时间线
Tour 漫游式引导
Tree 树形控件
Virtualized Tree 虚拟化树形控件
Statistic 统计组件
Segmented 分段控制器

Affix 固钉
Anchor 锚点
Backtop 回到顶部
Breadcrumb 面包屑
Dropdown 下拉菜单
Menu 菜单
Page Header 页头
Steps 步骤条
Tabs 标签页

Feedback 反馈组件 (10个)

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

Others 其他 (2个)

Divider 分割线
Watermark 水印

环境搭建与基础概念

安装与配置

bash

# 使用 npm 安装
npm install element-plus --save

# 使用 yarn 安装
yarn add element-plus

# 使用 pnpm 安装
pnpm install element-plus

完整引入

typescript

// main.ts
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')

按需引入

typescript

// main.ts
import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.component('ElButton', ElButton)
app.component('ElSelect', ElSelect)
app.mount('#app')

自动导入（推荐）

bash

npm install -D unplugin-vue-components unplugin-auto-import

typescript

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

TypeScript 支持

Element Plus 完全支持 TypeScript，提供了完整的类型定义：

typescript

import type { FormInstance, FormRules } from 'element-plus'

interface User {
  name: string
  email: string
}

const formRef = ref<FormInstance>()
const rules = reactive<FormRules<User>>({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  ],
})

主题定制

CSS 变量定制

css

:root {
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
}

SCSS 变量定制

scss

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

// 导入 Element Plus 样式
@use "element-plus/theme-chalk/src/index.scss" as *;

国际化配置

typescript

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

const app = createApp(App)

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

app.mount('#app')

全局配置

vue

<template>
  <el-config-provider :locale="locale" :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const locale = zhCn
const size = 'default'
const zIndex = 3000
</script>

开发工具推荐

VS Code 插件

Element Plus Snippets
Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)

浏览器开发工具

Vue.js devtools
Element Plus Theme Roller

最佳实践

按需引入：使用自动导入插件，减少打包体积
类型安全：充分利用 TypeScript 类型定义
主题一致性：统一使用 CSS 变量进行主题定制
国际化：提前规划多语言支持
性能优化：合理使用虚拟化组件处理大数据
可访问性：遵循 ARIA 标准，提升用户体验

学习路径建议

基础阶段：掌握基础组件和表单组件
进阶阶段：学习数据展示和导航组件
高级阶段：深入理解组件原理和定制开发
实战阶段：完成综合项目，积累实践经验
专家阶段：参与开源贡献，分享技术经验

通过系统学习 Element Plus，您将能够快速构建现代化的 Vue.js 应用程序，提升开发效率和用户体验。

设计原则与基础概念 ​

Element Plus 设计原则 ​

一致性 (Consistency) ​

反馈 (Feedback) ​

效率 (Efficiency) ​

可控性 (Controllability) ​

Element Plus 组件体系概览 ​

Basic 基础组件 (12个) ​

配置组件 (1个) ​

Form 表单组件 (22个) ​

Data 数据展示 (23个) ​

Navigation 导航 (9个) ​

Feedback 反馈组件 (10个) ​

Others 其他 (2个) ​

环境搭建与基础概念 ​

安装与配置 ​

完整引入 ​

按需引入 ​

自动导入（推荐） ​

TypeScript 支持 ​

主题定制 ​

CSS 变量定制 ​

SCSS 变量定制 ​

国际化配置 ​

全局配置 ​

开发工具推荐 ​

VS Code 插件 ​

浏览器开发工具 ​

最佳实践 ​

学习路径建议 ​

设计原则与基础概念

Element Plus 设计原则

一致性 (Consistency)

反馈 (Feedback)

效率 (Efficiency)

可控性 (Controllability)

Element Plus 组件体系概览

Basic 基础组件 (12个)

配置组件 (1个)

Form 表单组件 (22个)

Data 数据展示 (23个)

Navigation 导航 (9个)

Feedback 反馈组件 (10个)

Others 其他 (2个)

环境搭建与基础概念

安装与配置

完整引入

按需引入

自动导入（推荐）

TypeScript 支持

主题定制

CSS 变量定制

SCSS 变量定制

国际化配置

全局配置

开发工具推荐

VS Code 插件

浏览器开发工具

最佳实践

学习路径建议