第一章：简介与安装

什么是 Element Plus？

Element Plus 是基于 Vue 3 的组件库：

• 丰富的组件：60+ 高质量组件
• TypeScript 支持：完整类型定义
• 主题定制：CSS 变量 + SCSS
• 国际化：多语言支持
• 按需引入：Tree-shaking 支持

安装

完整安装

npm install element-plus

按需安装（推荐）

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

配置

Vite 配置

// vite.config.js
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()]
    })
  ]
})

完整引入

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

基本使用

自动导入

<template>
  <!-- 直接使用，无需导入 -->
  <el-button type="primary">按钮</el-button>
</template>

<script setup>
// 自动导入 API
const message = ElMessage({
  message: '成功',
  type: 'success'
})
</script>

手动导入

<script setup>
import { ElButton, ElMessage } from 'element-plus'

function showMessage() {
  ElMessage.success('操作成功')
}
</script>

<template>
  <el-button @click="showMessage">显示消息</el-button>
</template>

全局配置

尺寸配置

app.use(ElementPlus, {
  size: 'small', // 'large' | 'default' | 'small'
  zIndex: 3000
})

国际化

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

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

按需配置

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

<template>
  <el-config-provider :locale="zhCn" size="default">
    <App />
  </el-config-provider>
</template>

图标使用

安装图标

npm install @element-plus/icons-vue

全局注册

// main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

使用图标

<template>
  <!-- 组件方式 -->
  <el-icon><Edit /></el-icon>
  <el-icon><Delete /></el-icon>

  <!-- 在按钮中使用 -->
  <el-button type="primary">
    <el-icon><Plus /></el-icon>
    添加
  </el-button>
</template>

<script setup>
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
</script>

快速示例

<template>
  <el-container>
    <el-header>
      <h1>Element Plus 示例</h1>
    </el-header>

    <el-main>
      <!-- 表单 -->
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">登录</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="address" label="地址" />
      </el-table>
    </el-main>
  </el-container>
</template>

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

const form = ref({
  username: '',
  password: ''
})

const tableData = ref([
  { name: '张三', age: 25, address: '北京' },
  { name: '李四', age: 30, address: '上海' }
])

function handleSubmit() {
  ElMessage.success('登录成功')
}
</script>

小结

本章学习了：

• ✅ Element Plus 简介
• ✅ 安装和配置
• ✅ 按需引入
• ✅ 全局配置
• ✅ 图标使用

下一章

第二章：基础组件 - 学习常用基础组件。