Inicio Rápido ​

Esta sección describe cómo utilizar Element Plus en su proyecto.

Uso ​

Importación completa ​

Si no le importa tanto el tamaño del paquete, es más conveniente utilizar la importación completa.

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')

Soporte Volar ​

Si utiliza volar, agregue la definición global a compilerOptions.types en tsconfig.json.

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

Importación a petición ​

Necesita usar un plugin adicional para importar componentes que haya utilizado.

Autoimportación Recomendado ​

Primero necesita instalar unplugin-vue-components y unplugin-auto-import.

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

$ yarn add -D unplugin-vue-components unplugin-auto-import

$ pnpm install -D unplugin-vue-components unplugin-auto-import

Then add the code below into your Vite or Webpack config file.

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()],
    }),
  ],
})

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Para más paquetes (Rollup, Vue CLI) y configuraciones, por favor consulte unplugin-vue-components y unplugin-auto-import.

Nuxt ​

Para usuarios de Nuxt, solo necesita instalar @element-plus/nuxt.

$ npm install -D @element-plus/nuxt

$ yarn add -D @element-plus/nuxt

$ pnpm install -D @element-plus/nuxt

Luego añada el código de abajo en su archivo de configuración.

export default defineNuxtConfig({
  modules: ['@element-plus/nuxt'],
})

shamefully-hoist=true
node-linker=hoisted

shamefullyHoist: true
nodeLinker: hoisted

pnpm add dayjs

For more configuration options, please refer to the docs.

Importar manualmente ​

Element Plus proporciona funcionalidades de Tree Shaking basada en los Módulos ES.

Pero necesita instalar unplugin-element-plus para importar estilo. Y consulte la documentación para saber cómo configurarla.

<template>
  <el-button>I am ElButton</el-button>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
</script>

import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  // ...
  plugins: [ElementPlus()],
})

Plantilla de inicio ​

Proporcionamos una Plantilla de Vite.

Para los usuarios de Nuxt tenemos una Plantilla de Nuxt.

Para los usuarios de Laravel tenemos una Plantilla de Laravel.

Configuración global ​

Al registrar Element Plus, se puede pasar un objeto de configuración global. Este objeto soporta actualmente los campos size y zIndex size se utiliza para cambiar el tamaño por defecto del componente y zIndex establece el z-indez inicial de la caja emergente, valor por defecto 2000.

Importación completa:

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

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

Bajo demanda:

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

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'

const zIndex = 3000
const size = 'small'
</script>

Usando Nuxt.js ​

We can also use Nuxt.js. Please refer to Element Plus Nuxt.js starter template for more details.

Empecemos ​

Puede arrancar su proyecto a partir de ahora. For each components usage, please refer to the individual component documentation.