element-plus/website/docs/es/quickstart.md
jeremywu 6b2b7ec702
fix(components): exposing style folder for select dropdpwn (#3077)
- Fix the error importing in style file
- Update plugin usage for `babel-plugin-import`
2021-08-26 15:11:47 +08:00

228 lines
6.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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
<template>
<el-button>
Soy ElButton
</el-button>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
</script>
```
### 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
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
</head>
```
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)
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
</div>
## 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`
},
},
],
]
}
```