¿Qué hace element-plus-vue3?
Proporciona guía completa sobre la biblioteca de componentes Element Plus para Vue 3, incluyendo instalación, componentes, temas, internacionalización y referencia de API. Úsalo cuando el usuario pregunte sobre Element Plus para Vue 3, necesite construir aplicaciones Vue 3 con Element Plus o personalizar estilos de componentes.
Instalación
Para instalar Element Plus en un proyecto Vue 3, ejecuta:
npm install element-plus
O si usas yarn:
yarn add element-plus
Uso básico
Importación completa
En tu archivo main.js o 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')
Importación bajo demanda
Para reducir el tamaño del bundle, puedes importar componentes individualmente:
import { ElButton, ElSelect } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/select/style/css'
const app = createApp(App)
app.component(ElButton.name, ElButton)
app.component(ElSelect.name, ElSelect)
Componentes principales
- ElButton: Botones con variantes (primary, success, warning, danger, info) y tamaños.
- ElInput: Campos de entrada con soporte para validación y tipos.
- ElSelect: Listas desplegables con búsqueda y selección múltiple.
- ElTable: Tablas con ordenamiento, filtrado y selección de filas.
- ElForm: Formularios con validación integrada.
- ElDialog: Ventanas modales personalizables.
- ElMessage: Notificaciones temporales.
- ElMenu: Menús de navegación.
Personalización de temas
Element Plus utiliza variables CSS para la personalización de temas. Puedes sobrescribirlas en tu archivo CSS:
:root {
--el-color-primary: #409eff;
--el-color-success: #67c23a;
--el-color-warning: #e6a23c;
--el-color-danger: #f56c6c;
--el-color-info: #909399;
}
O usando SCSS con vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'
import path from 'path'
export default defineConfig({
plugins: [
vue(),
ElementPlus({
useSource: true,
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})
Internacionalización (i18n)
Element Plus soporta múltiples idiomas mediante el plugin de internacionalización:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/es'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { locale })
app.mount('#app')
Puedes cambiar el idioma dinámicamente:
import { useLocale } from 'element-plus'
const { locale } = useLocale()
locale.value = 'en'
Referencia de API
Cada componente expone:
- Props: Atributos configurables.
- Events: Eventos emitidos.
- Slots: Contenido personalizado.
- Methods: Métodos invocables (si aplica).
Ejemplo con ElButton:
<template>
<el-button
:type="primary"
:disabled="false"
:loading="false"
@click="handleClick"
>
Haga clic aquí
</el-button>
</template>
<script setup>
const handleClick = () => {
console.log('Botón clickeado')
}
</script>