前端学习教程-ElementPlus 教程

Element Plus 是基于 Vue 3 的企业级 UI 组件库，提供了丰富的预置组件，可帮助开发者快速构建高质量的前端界面。

一、安装 Element Plus

1. 环境要求

• Vue 3.0+
• Node.js 14.0+

2. 安装方式

（1）使用 npm 或 yarn 安装（推荐）

# npm
npm install element-plus --save

# yarn
yarn add element-plus

（2）按需安装（减小打包体积）

需要额外安装插件：

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

二、引入 Element Plus

1. 全局引入（快速开发）

在入口文件(main.js)中全局引入，所有组件可直接使用：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'  // 引入 Element Plus
import 'element-plus/dist/index.css'    // 引入样式
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'  // 引入中文语言包

const app = createApp(App)

// 使用 Element Plus 并配置语言
app.use(ElementPlus, {
  locale: zhCn
})

app.mount('#app')

2. 按需引入（生产环境推荐）

仅引入需要的组件，减小项目体积。需配置 vite.config.js（Vite 项目）：

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(),
    // 自动导入 Element Plus 相关函数
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }),
    // 自动导入 Element Plus 组件
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    })
  ]
})

三、基础组件使用

1. 按钮（Button）

最常用的交互组件，支持多种样式和状态：

<template>
  <div class="button-demo">
    <!-- 基础按钮 -->
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>

    <!-- 不同尺寸 -->
    <el-button size="large">大按钮</el-button>
    <el-button size="default">默认尺寸</el-button>
    <el-button size="small">小按钮</el-button>

    <!-- 状态按钮 -->
    <el-button disabled>禁用按钮</el-button>
    <el-button type="primary" loading>加载中</el-button>
    <el-button type="primary" icon="Search">带图标</el-button>
  </div>
</template>

<script setup>
// 按需引入时无需额外导入，全局引入也可直接使用
</script>

<style scoped>
.button-demo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px;
}
</style>

2. 表单（Form）

用于数据收集和验证，包含输入框、选择器等控件：

<template>
  <el-form 
    :model="form" 
    :rules="rules" 
    ref="formRef" 
    label-width="100px"
    class="form-demo"
  >
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input 
        v-model="form.password" 
        type="password" 
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>

    <el-form-item label="性别">
      <el-radio-group v-model="form.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="爱好">
      <el-checkbox-group v-model="form.hobbies">
        <el-checkbox label="reading">阅读</el-checkbox>
        <el-checkbox label="sports">运动</el-checkbox>
        <el-checkbox label="coding">编程</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 表单数据
const form = reactive({
  username: '',
  password: '',
  gender: 'male',
  hobbies: []
})

// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }
  ]
})

// 表单引用
const formRef = ref(null)

// 提交表单
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单数据:', form)
      // 这里可以发送 API 请求
    } else {
      console.log('表单验证失败')
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields()
}
</script>

<style scoped>
.form-demo {
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

3. 表格（Table）

用于展示结构化数据，支持排序、筛选、分页等功能：

<template>
  <div class="table-demo">
    <el-table 
      :data="tableData" 
      border 
      style="width: 100%; margin-bottom: 20px"
    >
      <el-table-column 
        prop="date" 
        label="日期" 
        width="180"
      ></el-table-column>
      <el-table-column 
        prop="name" 
        label="姓名" 
        width="180"
      ></el-table-column>
      <el-table-column 
        prop="address" 
        label="地址"
      ></el-table-column>
      <el-table-column 
        label="操作" 
        width="200"
      >
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'  // 引入消息提示组件

// 表格数据
const tableData = reactive([
  {
    date: '2023-05-01',
    name: '张三',
    address: '北京市朝阳区'
  },
  {
    date: '2023-05-02',
    name: '李四',
    address: '上海市浦东新区'
  },
  {
    date: '2023-05-03',
    name: '王五',
    address: '广州市天河区'
  }
])

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1  // 重置为第一页
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 编辑操作
const handleEdit = (row) => {
  ElMessage.success(`编辑 ${row.name}`)
  // 实际项目中会打开编辑对话框
}

// 删除操作
const handleDelete = (row) => {
  const index = tableData.findIndex(item => item.name === row.name)
  tableData.splice(index, 1)
  ElMessage.success(`已删除 ${row.name}`)
}
</script>

<style scoped>
.table-demo {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}
</style>

4. 对话框（Dialog）

用于显示弹窗内容，如表单、详情等：

<template>
  <div class="dialog-demo">
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>

    <el-dialog
      v-model="dialogVisible"
      title="示例对话框"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <p>这是一个对话框示例</p>
      <el-input v-model="dialogContent" placeholder="请输入内容"></el-input>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 控制对话框显示/隐藏
const dialogVisible = ref(false)
// 对话框宽度
const dialogWidth = ref('50%')
// 对话框内容
const dialogContent = ref('')

// 关闭对话框前的回调
const handleClose = (done) => {
  if (dialogContent.value) {
    done()  // 关闭对话框
  } else {
    ElMessage.warning('请输入内容')
  }
}

// 确认按钮回调
const handleConfirm = () => {
  ElMessage.success(`你输入的内容：${dialogContent.value}`)
  dialogVisible.value = false
}
</script>

四、主题定制

Element Plus 支持自定义主题，可通过修改 SCSS 变量实现：

1. 安装 SCSS 依赖

npm install sass sass-loader --save-dev

2. 创建主题变量文件

// src/styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #42b983,  // 自定义主色调（Vue 绿色）
    ),
  ),
  $button-padding: (
    'default': 8px 20px,  // 自定义按钮内边距
  )
);

3. 配置 Vite 引入自定义主题

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
})

五、国际化

Element Plus 内置多语言支持，默认是英文，可配置为中文或其他语言：

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

// 导入语言包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import ja from 'element-plus/dist/locale/ja.mjs'

// 模拟语言切换（实际项目中可结合 store 存储用户选择的语言）
const lang = 'zh-cn'  // 可改为 'en' 或 'ja'

const app = createApp(App)

// 根据选择的语言设置
const locale = {
  'zh-cn': zhCn,
  'en': en,
  'ja': ja
}[lang]

app.use(ElementPlus, { locale })
app.mount('#app')

六、常用组件速查表

组件名	用途	核心属性
el-button	按钮交互	type、size、disabled、loading
el-form	数据收集	model、rules、label-width
el-input	文本输入	v-model、placeholder、type
el-table	数据展示	data、border、height
el-dialog	弹窗	v-model、title、width
el-select	选择器	v-model、options、multiple
el-pagination	分页	total、page-size、current-page
el-message	消息提示	message、type、duration

总结

Element Plus 为 Vue3 提供了丰富的企业级 UI 组件:

• 安装和引入 Element Plus 的两种方式
• 常用组件（按钮、表单、表格、对话框）的基本用法
• 主题定制和国际化配置