teachingai/element-plus-vue3

element-plus-vue3 是做什么的？

提供 Element Plus Vue 3 组件库的全面指导，包括安装、组件、主题、国际化及 API 参考。当用户询问 Element Plus for Vue 3、需要使用 Element Plus 构建 Vue 3 应用或自定义组件样式时使用。

安装

npm install element-plus

快速开始

完整引入

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

const app = createApp(App)
app.use(ElementPlus)

按需导入

推荐使用自动导入方式：

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

然后在 vite.config.ts 中配置：

import { defineConfig } from 'vite'
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: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

组件使用

Element Plus 提供了丰富的组件，以下是一些常用示例：

Button 按钮

<template>
  <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 type="info">信息按钮</el-button>
</template>

Form 表单

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

主题定制

通过 CSS 变量覆盖主题

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
}

使用 SCSS 变量

需要安装 element-plus/theme-chalk 并使用 @use：

// 覆盖主题变量
$--color-primary: #1890ff;

@use 'element-plus/theme-chalk/src/index.scss';

国际化

Element Plus 默认使用中文，如需切换为英文：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import en from 'element-plus/es/locale/lang/en'

const app = createApp(App)
app.use(ElementPlus, { locale: en })

API 参考

完整组件 API 请参考官方文档：Element Plus 官方文档

常用组件 API

• el-button：type, size, round, circle, disabled, icon
• el-input：model-value, placeholder, clearable, show-password, disabled
• el-form：model, rules, label-width, inline, disabled
• el-table：data, stripe, border, max-height, fit

常见问题

1. 如何升级 Element Plus？

   npm update element-plus
   

2. 组件样式不生效？ 确保已正确导入 CSS 文件：

   import 'element-plus/dist/index.css'
   

3. 如何自定义组件的颜色？ 使用 CSS 变量覆盖或通过 SCSS 变量进行深度定制。