# Inicio rápido
Esta sección describe cómo utilizar ElementPlus en su proyecto.
## Uso de componentes
### Introducción completa de todos los componentes
> main.ts
```typescript
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')
```
### Introducción de componentes a la carta
El código JS en `ElementPlus` soporta
[tree shaking](https://webpack.js.org/guides/tree-shaking/) basado en módulos ES
por defecto.
> App.vue
```html
Soy ElButton
```
### Introducción de estilos
**Recomendamos encarecidamente traer los archivos de estilo completos directamente**,
aunque pueda parecer que esto aumenta el tamaño de toda la aplicación, al hacerlo
se evita la introducción de plugins de herramientas de empaquetado adicionales
(una carga menor) y también se puede utilizar el
[CDN](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/)
para cargar los archivos de estilo, haciendo así que su aplicación cargue más rápido.
Introducido por medio de JS
```typescript
import 'element-plus/dist/index.css'
```
Introducido a través de las cabeceras HTML
```html
```
Si quiere que los estilos se introduzcan también a la carta, puede utilizar el
complemento que proporciona la herramienta correspondiente para referenciarlos.
Ver [FAQ](/#/es/component/quickstart#faqs)
## Plantilla de proyecto de construcción rápida
### Use vue-cli@4.5
Hemos preparado los correspondientes plugins vue-cli para la nueva versión de
[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)
que puede utilizar para construir rápidamente un proyecto basado en
Proyecto Element Plus.
### Use Starter Kit
Proporcionamos [plantillas de proyecto](https://github.com/element-plus/element-plus-starter)
genéricas que puede utilizar directamente, además de proporcionar
Vite [plantilla](https://github.com/element-plus/element-plus-vite-starter). Para
Los usuarios de Laravel, también tenemos una
[plantilla correspondiente](https://github.com/element-plus/element-plus-in-laravel-starter)
que también puede descargar y utilizar directamente.
## Configuración global
Al introducir Element Plus, se puede pasar un objeto de configuración global.
Este objeto soporta actualmente los campos `size` y `zIndex`. "tamaño
se utiliza para cambiar el tamaño por defecto del componente y `zIndex` establece
el índice z inicial de la caja emergente (valor por defecto: 2000). El Elemento Plus
se presenta a la demanda de la siguiente manera.
Presentación completa de ElementPlus.
```js
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 });
```
Presentación de Element on demand.
```js
import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
// import 'element-plus/packages/theme-chalk/src/base.scss'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);
```
Con la configuración anterior, todos los componentes del proyecto con la propiedad
`size` tendrán un tamaño por defecto de `pequeño` y el índice z inicial de la
caja emergente será de 3000.
## Cómo empezar
Ahora que se ha configurado un entorno de desarrollo basado en Vue y Element Plus,
es el momento de escribir el código. Consulte la documentación de cada componente
para saber cómo utilizarlos。
### Use Nuxt.js
También podemos utilizar [Nuxt.js](https://nuxtjs.org)：
## FAQs
### Quiero introducir tanto componentes como estilos a la carta, ¿qué debo hacer?
Puede conseguirlo en función del bundler que esté utilizando actualmente, con
Plugins compatibles con ElementPlus.
#### Carga de estilos a la carta con vite
Si utiliza [vite](https://vitejs.dev) como herramienta de compilación, deberá instalar
primero `vite-plugin-element-plus` para cargar los estilos bajo demanda.
```shell
yarn add vite-plugin-element-plus -D
# o
npm install vite-plugin-element-plus -D
```
A continuación, añada el siguiente código al archivo `vite.config.js`:
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VitePluginElementPlus({
// Si necesita utilizar el archivo fuente [nombre del componente].scss,
// deberá descomentar el mismo a continuación.
// Para todas las APIs puede consultar la documentación en https://github.com/element-plus/vite-plugin-element-plus
// para los comentarios de la documentación
// useSource: true
}),
],
})
```
#### Carga de estilos bajo demanda con webpack
Si estás usando webpack como herramienta de empaquetado, entonces necesitas instalar
primero `babel-plugin-import` para cargar los estilos bajo demanda
```shell
yarn add babel-plugin-import -D
# o
npm install babel-plugin-import -D
```
A continuación, debe añadir el siguiente código a su archivo `babel.config.js`.
> babel.config.js
```javascript
module.exports = {
plugins: [
[
"import",
{
libraryName: 'element-plus',
// import component
customName: (name) => {
name = name.slice(3)
return `element-plus/lib/components/${name}`
},
// import style
customStyleName: (name) => {
name = name.slice(3)
// Si necesitas el archivo [nombre].scss, entonces necesitas comentar
// la línea de código anterior y descomentar la siguiente línea de código
// return `element-plus/lib/components/${name}/style`
// Si necesita el archivo [nombre].css, debe devolver la siguiente línea
return `element-plus/lib/components/${name}/style/css`
},
},
],
]
}
```